：first-child

:first-child 选择器允许您定位另一个元素内部的第一个元素。它在 CSS 选择器级别 3 规范 中被定义为“结构性伪类”，这意味着它用于根据其与父级和兄弟级内容的关系来设置内容的样式。

假设我们有一篇文章，并希望使第一个段落更大 - 就像“导语”或一段介绍性文字

<article>
  <p>First paragraph...</p>
  <p>Lorem ipsum...</p>
  <p>Dolor sit amet...</p>
  <p>Consectetur adipisicing...</p>
</article>

与其赋予它一个类（例如 .first），我们可以使用 :first-child 来选择它。

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

使用 :first-child 与 :first-of-type 非常相似，但存在一个关键区别：它不太具体。:first-child 仅尝试匹配父元素的直接第一个子元素，而 first-of-type 将匹配指定元素的第一个出现，即使它在 HTML 中不是绝对的第一个。在上面的示例中，结果将相同，仅仅是因为 article 的第一个子元素也恰好是第一个 p 元素。这揭示了 :first-child 的强大功能：它可以识别相对于所有兄弟元素的元素，而不仅仅是相同类型的兄弟元素。

下面的更完整的示例演示了 :first-child 和一个相关的伪类选择器 ：last-child 的用法。

Check out this Pen!

其他资源

• 相关：last-child，first-of-type，：last-of-type
• Mozilla 文档

浏览器支持

Chrome	Safari	Firefox	Opera	IE	Android	iOS
所有	3.2+	所有	9.5+	9+	所有	所有

:first-child 在 CSS 选择器模块 3 中引入，这意味着旧版本的浏览器不支持它。但是，现代浏览器的支持非常出色，并且新的伪选择器在生产环境中被广泛使用。如果您需要旧版浏览器的支持，请使用 IE 的 polyfill，或者以渐进增强的方式使用这些选择器，建议您这样做。