前端技术学习之选择器(七)

八,:first-of-type

:first-of-type选择器类似于:first-child选择器,不同之处是指定了元素的类型,主要用于定位一个父元素下的某个类型的第一个子元素。

个人觉得这个:first-of-child是对:first-child的细分,锦上添花。

举个例子:给div容器中第一个p元素设置样式。

选择器

/*p元素的父元素的第一个子元素是div而不是p元素,因此该样式不起作用*/

p:first-child{

color: red;

}

/*此时不用first-of-type,更待何时*/

p:first-of-type{

color: blue;

}

第一个子元素是div元素

第二个div元素

第一个p元素

第二个p元素

运行效果:

备注:last-of-type选择器和:first-of-type功能是一样的,不同的是它匹配的是父元素下的某个类型的最后一个子元素。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容