:first-child | CSS属性参考

943次阅读
没有评论

共计 1224 个字符,预计需要花费 4 分钟才能阅读完成。

CSS :first-child伪类选择器用于匹配父元素中的第一个子元素。

:first-child伪类选择器仅仅会匹配某个父元素中的第一个子元素,例如:

<article>
  <p>
    第一个段落...
  </p>
  <p>
    第二个段落...
  </p>
</article>

如果使用下面的 CSS 规则来添加样式,那么第一个段落的文字大小将被修改:

p:first-child {font-size: 2em;}

但是如果在容器中,<p>段落不是第一个元素,那么它不会被匹配,例如:

<article>
  <h1> 标题 </h1>
  <p>
    第一个段落...
  </p>
  <p>
    第二个段落...
  </p>
</article>

如果还是使用上面的 CSS 规则,将没有 <p> 段落元素会被匹配。

在这种情况下,如果你想匹配第一个段落,可以使用 :first-of-type 伪类选择器。正如其名字所示,:first-of-type伪类选择器匹配的是某种类型元素的第一个元素。使用下面的代码将匹配 H1 标题之后的第一个段落元素:

p:first-of-type {font-size: 2em;}
示例代码

假如你有一段这样的 HTML 代码:

<article>
    <h1> 这是一个标题元素 </h1>
    <p>
        第一个段落,但不是父元素中的第一个元素。</p>
    <p>
        第二个段落。<span> 这是段落中的一个行内元素。</span>
    </p>
    <ul>
        <li> 第一个无序列表项 </li>
        <li> 第二个无序列表项 </li>
        <li> 第三个无序列表项 </li>
    </ul>
</article>

下面的代码会匹配第二个段落中的行内 <span> 元素。

span:first-child {color: red;}

下面的代码会匹配第一个无序列表项。

li:first-child {
    text-decoration: underline;
    color: deepPink;
}

下面的代码通过 ::before::after伪元素来为 <span> 元素添加内容。

span:first-child::before {
    content: "(";
    color: deepPink;
}

span:first-child::after {content: ")";
    color: deepPink;
}
在线演示

下面的例子是上面代码的实际效果。

这是一个标题元素

第一个段落,但不是父元素中的第一个元素。

第二个段落。这是段落中的一个行内元素。

  • 第一个无序列表项
  • 第二个无序列表项
  • 第三个无序列表项
浏览器支持

所有的现代浏览器都支持 :first-child 伪类选择器,包括:Chrome, Firefox, Safari, Opera9.5+, Internet Explorer 7+ 以及 Android 和 iOS。

在 IE7 中,如果元素是动态加入的,则不会被更新样式。

在 IE8 中,如果是通过链接来动态插入的元素不会被添加样式,直到该链接失去焦点。

相关阅读
正文完
 0