css選擇器first-child與first-of-type之間有哪些區(qū)別

這篇文章給大家分享的是有關(guān)css選擇器first-child與first-of-type之間有哪些區(qū)別的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過來看看吧。

區(qū)別：:first-child匹配父元素中的第一個(gè)子元素，可以說是結(jié)構(gòu)上的第一個(gè)子元素；而:first-of-type匹配父元素下相同類型子元素中的第一個(gè)，不再限制是第一個(gè)子元素了，只要是該類型元素的第一個(gè)就行了。

css選擇器中first-child與first-of-type的區(qū)別

:first-child選擇器是css2中定義的選擇器，從字面意思上來看也很好理解，就是第一個(gè)子元素，匹配其父元素中的第一個(gè)子元素。

比如有段代碼：

p:first-child  匹配到的是p元素,因?yàn)閜元素是p的第一個(gè)子元素；
h2:first-child  匹配不到任何元素，因?yàn)樵谶@里h2是p的第二個(gè)子元素，而不是第一個(gè)；
span:first-child  匹配不到任何元素，因?yàn)樵谶@里兩個(gè)span元素都不是p的第一個(gè)子元素；

:first-of-type選擇器是css3中定義的選擇器，匹配元素其父級(jí)是特定類型的第一個(gè)子元素。

這個(gè)跟:first-child有什么區(qū)別呢？還是看那段代碼：

p:first-of-type  匹配到的是p元素,因?yàn)閜是p的所有類型為p的子元素中的第一個(gè)；
h2:first-of-type  匹配到的是h2元素，因?yàn)閔2是p的所有類型為h2的子元素中的第一個(gè)；
span:first-of-type  匹配到的是第三個(gè)子元素span。這里p有兩個(gè)為span的子元素，匹配到的是它們中的第一個(gè)。

所以，通過以上兩個(gè)例子可以得出結(jié)論：

:first-child 匹配的是某父元素的第一個(gè)子元素，可以說是結(jié)構(gòu)上的第一個(gè)子元素。

:first-of-type 匹配的是某父元素下相同類型子元素中的第一個(gè)，比如 p:first-of-type，就是指所有類型為p的子元素中的第一個(gè)。這里不再限制是第一個(gè)子元素了，只要是該類型元素的第一個(gè)就行了。

感謝各位的閱讀！關(guān)于css選擇器first-child與first-of-type之間有哪些區(qū)別就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！