:last-child

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

假设我们有一篇文章，想要使最后一段文字变小，以充当内容的结论（如编辑注释）。

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

我们可以使用 :last-child 来选择它，而不是使用类（例如 .last）。

p:last-child {
  font-size: 0.75em;
}

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

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

Check out this Pen!

其他资源

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

浏览器支持

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

:last-child 是在 CSS 选择器模块 3 中引入的，这意味着旧版本的浏览器不支持它。但是，现代浏览器的支持是完美的，新的伪选择器在生产环境中被广泛使用。如果您需要支持旧的浏览器，您可以使用 为 IE 使用 polyfill，或者以渐进增强的方式使用这些选择器，这是一种推荐的做法。