css中first-of-type和first child的区别有哪些

这篇文章主要介绍了CSS中first-of-type和first child的区别有哪些，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

　　<div>

　　<h2></h2>

　　<p></p>

　　<span></span>

　　<span></span>

　　</div>

　　（1）：first-child

　　h2:first-child：选择的是h2元素，因为h2元素是div的第1个子元素。

　　p:first-child：选择不到任何元素，因为p并不是div的第1个子元素，而是div的第2个子元素。

　　span:first-child:选择不到任何元素，因为span并不是div的第1个子元素，而是div的第3个子元素；

　　（2）：first-of-type

　　h2:first-of-type:选择的是h2元素，因为h2元素是div中所有h2元素中的第1个h2元素，事实上也只有一个为h2的子元素；

　　p:first-of-type:选择的是p元素，因为p元素是div中所有p元素中的第1个p元素，事实上也只有一个为p的子元素；

　　span:first-of-type:选择的是id="first"的span元素，因为在div元素中有2个span元素，我们选择的是两个之中的第1个。

　　总结：

　　“：first-child”是选择父元素下的第1个子元素（不区分元素类型），而“：first-of-type”是选择父元素下某个元素类型的第1个子元素（区分元素类型）。

　　“：last-child”和“：last-of-type”、“nth-child（n）”和“：nth-of-type（n）”同样也可以这样去理解，在此不再累赘说明。


 

感谢你能够认真阅读完这篇文章，希望小编分享的“css中first-of-type和first child的区别有哪些”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网JavaScript频道，更多相关知识等着你来学习!