别样的伪类:first-of-type

发布时间:2019-01-03 作者:一点通


:first-of-type是CSS中的一个伪类,表示一组兄弟元素中,和其类型一致的第一个元素。

例如

<h2>Heading</h2>
<p>Paragraph1</p>
<p>Paragraph2</p>

加上如下的CSS

p:first-of-type{
    color: red;
}

那么Paragraph1的p标签的颜色为红色。

如果不指定简单选择器呢?看看下面的例子

div :first-of-type{
    background-color: lime;
}

将上面的CSS应用到下面的HTML中

<div>
    <span>会选中</span>
    <span>不会选中</span>
    <span>不会选中<em>会选中</em>不会选中</span>
    <span>不会选中<span>会选中</span>不会选中</span>
    <b>会选中</b>
    <span>不会选中</span> 
</div>

可以看到,只要在当前的层级是同类型第一个元素,都会被选中。:first-of-type支持IE9+的浏览器

demo