:first-child選擇器是css2中定義的選擇器，從字面意思上來看也很好理解，就是第一個(gè)子元素。比如有段代碼：

p:first-child? 匹配到的是p元素,因?yàn)閜元素是div的第一個(gè)子元素；

h1:first-child? 匹配不到任何元素，因?yàn)樵谶@里h1是div的第二個(gè)子元素，而不是第一個(gè)；

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

?

然后，在css3中又定義了:first-of-type這個(gè)選擇器，這個(gè)跟:first-child有什么區(qū)別呢？還是看那段代碼：

p:first-of-type? 匹配到的是p元素,因?yàn)閜是div的所有類型為p的子元素中的第一個(gè)；

h1:first-of-type? 匹配到的是h1元素，因?yàn)閔1是div的所有類型為h1的子元素中的第一個(gè)；

span:first-of-type? 匹配到的是第三個(gè)子元素span。這里div有兩個(gè)為span的子元素，匹配到的是它們中的第一個(gè)。

?

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

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

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

同樣類型的選擇器 :last-child? 和 :last-of-type、:nth-child(n)? 和? :nth-of-type(n) 也可以這樣去理解。

轉(zhuǎn)載自：https://www.cnblogs.com/2050/p/3569509.html，轉(zhuǎn)載請注明來源

?

轉(zhuǎn)載于:https://www.cnblogs.com/damoblog/p/10150265.html

總結(jié)

以上是生活随笔為你收集整理的css选择器中:first-child与:first-of-type的区别的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。