:nth-last-of-type

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

假设我们有一个无序列表，并希望突出显示倒数第二个项目（在此确切示例中，“第四个项目”）

<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-of-type

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

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

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

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

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

查看 Chris Coyier 在 CodePen 上的 Pen CSS-Tricks：:nth-last-of-type（@chriscoyier）。

幸运的是，您并不总是必须自己进行计算——有几个 :nth-last-of-type 测试器和生成器

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

要点

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

相关属性

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

其他资源

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

浏览器支持

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

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