:nth-last-child

:nth-last-child 选择器允许您根据公式选择一个或多个元素，这些元素基于它们的源顺序。 它在 CSS 选择器级别 3 规范 中被定义为“结构性伪类”，这意味着它用于根据内容与其父元素和兄弟元素的关系来设置样式。 它的功能与 :nth-child 相同，只是它从源顺序的底部开始选择项目，而不是从顶部开始。

假设我们有一个包含未知数量项目的列表，并且我们希望突出显示倒数第二个项目（在此确切示例中，为“第四个项目”）。

<ul>
  <li>First Item</li>
  <li>Second Item</li>
  <li>Third Item</li>
  <li>Fourth Item</li>
  <li>Fifth Item</li>
</ul>

而不是执行诸如将类添加到列表项之类的操作（例如 .highlight），我们可以使用 :nth-last-child

li {
  background: slategrey;
}
/* select the second-last item */
li:nth-last-child(2) {
  background: lightslategrey;
}

如您所见，:nth-last-child 接受一个参数：它可以是单个整数、关键字“even”或“odd”，或公式。 如果指定了整数，则只选择一个元素——但关键字或公式将遍历父元素的所有子元素并选择匹配的元素——类似于在 JavaScript 中遍历数组中的项目。 关键字“even”和“odd”很简单（分别为 2、4、6 等等或 1、3、5）。 公式使用语法 an+b 构建，其中

• “a” 是一个整数值
• “n” 是字母“n” 本身
• “+” 是一个运算符，可以是“+” 或 “-”
• “b” 是一个整数，如果公式中包含运算符，则该整数是必需的

重要的是要注意，此公式是一个等式，它遍历每个兄弟元素，确定哪些元素将被选中。“n” 公式的一部分，如果包含在内，则表示一组递增的正整数（就像遍历数组一样）。 在我们上面的示例中，我们使用公式 2n 选择了每个第二个元素，这是有效的，因为每次检查元素时，“n” 都会增加一个（2×0、2×1、2×2、2×3 等等）。 如果元素的顺序与等式的结果匹配，则该元素将被选中（2、4、6 等等）。 有关所涉及数学的更深入解释，请阅读 这篇文章。

为了进一步说明，以下是有效 :nth-last-of-type 选择器的一些示例

Check out this Pen!

幸运的是，您并不总是需要自己做数学运算——有几个 :nth-last-child 测试器和生成器。

• CSS-Tricks 测试器
• Lea Verou 的测试器

要点

• :nth-last-child 从源顺序的底部开始遍历元素。 它与 :nth-child 的唯一区别在于后者从源顺序的顶部开始遍历元素。
• :nth-last-child 选择器与 :nth-last-of-type 非常相似，但有一个关键区别：它 不太具体。 在我们上面的示例中，它们会产生相同的结果，因为我们只遍历 li 元素，但是如果我们遍历更复杂的兄弟元素组，:nth-last-child 会尝试匹配所有兄弟元素，而不仅仅是相同元素类型的兄弟元素。 这揭示了 :nth-last-child 的强大功能——它可以选择排列中的任何兄弟元素，而不仅仅是冒号之前指定的元素。

相关属性

• nth-child
• nth-last-of-type
• nth-of-type
• first-of-type
• last-of-type

其他资源

• Mozilla 文档
• QuirksMode 文章
• Sitepoint 文章

浏览器支持

Chrome	Safari	Firefox	Opera	IE	Android	iOS
支持	3.2+	支持	9.5+	9+	支持	支持

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