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

p:first-child? 匹配到的是p元素,因為p元素是div的第一個子元素；

h1:first-child? 匹配不到任何元素，因為在這里h1是div的第二個子元素，而不是第一個；

span:first-child? 匹配不到任何元素，因為在這里兩個span元素都不是div的第一個子元素；

?

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

p:first-of-type? 匹配到的是p元素,因為p是div的所有類型為p的子元素中的第一個；

h1:first-of-type? 匹配到的是h1元素，因為h1是div的所有類型為h1的子元素中的第一個；

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

?

所以，通過以上兩個例子可以得出結論：

:first-child?匹配的是某父元素的第一個子元素，可以說是結構上的第一個子元素。

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

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

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

?

轉載于:https://www.cnblogs.com/damoblog/p/10150265.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。