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

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

创新互联公司是一家专注于成都做网站、网站制作与策划设计,岗巴网站建设哪家好?创新互联公司做网站,专注于网站建设10年,网设计领域的专业建站公司;建站业务涵盖:岗巴等地区。岗巴做网站价格咨询:13518219792

（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的区别有哪些”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!