:first-child和:first-of-type的区别

:first-child选择器和:first-of-type选择器的区别

:first-child 选择器匹配其父元素中的第一个子元素。 :first-of-type* 选择器匹配元素其父级是特定类型的第一个子元素。

p:first-of-type是所以特定类型p的第一个子元素;只要是该类型元素的第一个就行了,不要求是是第一个子元素了

:first-child和:first-of-type的区别

:first-child和:first-of-type的区别

**

span:first-child 匹配的是某父元素的第一个子元素,要求是第一个子元素

:first-child和:first-of-type的区别
:first-child和:first-of-type的区别

如果只留下div里的span元素 将选不到,因为span元素此时不是第一个子元素

:first-child和:first-of-type的区别
:first-child和:first-of-type的区别

因此:first-child强调某个父元素的第一个子元素,而:first-of-type强调的是特定类型的第一个,不必是第一个子元素

我的大概理解就是这样如果有误请大家指正