前端技术学习之选择器（七）

八，: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功能是一样的，不同的是它匹配的是父元素下的某个类型的最后一个子元素。