使用:first-child发现选择不起效,网上查了发现自己对:first-child和:first-of-type区别的认识不到。
:first-child 匹配父元素的第一个子元素E。
- 列表项一
- 列表项二
- 列表项三
- 列表项四
假设将代码简单地修改一下:
p:first-child{color:#f00;}
我是一个标题
我是一个p
E:first-child选择符,E必须是它的兄弟元素中的第一个元素,换言之,E必须是父元素的第一个子元素。与之类似的伪类还有E:last-child,只不过情况正好相反,需要它是最后一个子元素。
同理 :last-child(选择最后一个元素)
:first-of-type 匹配父元素下第一个类型为E的子元素。
需要注意3个要点:
首先,该选择符要匹配的是类型为E的子元素,这意味着E元素必须作为某个元素的子元素存在(E元素的父元素最高是html,也就是说E元素本身最高只能是body,这表示任何非html的元素都符合这个约束,因为html元素是根元素。)
其次,该选择符要匹配的是父元素第一个类型为E的子元素,这意味着被命中的元素不一定是父元素的第一个子元素(因为排在父元素首位的不一定是E元素,E元素可能在子元素列表中的任何位置)。
p1
p2
span1p3
span2 .demo span:first-of-type { color: #f00; }
此时 .demo 的第1个元素并没有被匹配到,而是匹配到了第3个子元素,因为第3个子元素正好是 .demo 的第1个span子元素
再次,只能匹配与E元素同级的元素,即:E元素的兄弟元素。来看下面这个例子:
span1
如上HTML,如果我想匹配其中的第1个span,代码如下:
span2 span3
span4 .demo span:first-of-type { color: #f00; }
结果span1和span2都会被命中,因为span1和span2分属不同的父元素,并且都是其父元素的首个span元素,所以都会被命 中。
同理 :last-of-type(选择最后一个元素)