:nth-of-type

:nth-of-type 选择器允许您根据公式选择一个或多个元素，这些元素基于它们的源顺序。它在 CSS 选择器级别 3 规范 中定义为“结构性伪类”，这意味着它用于根据内容与其父元素和兄弟元素的关系来设置样式。

假设我们有一个无序列表，并希望为交替的列表项“斑马条纹”。

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

而不是在每个列表项中添加类（例如 .even 和 .odd），我们可以使用 :nth-of-type

li {
  background: slategrey;
}
/* select alternating items starting with the second item */
li:nth-of-type(2n) {
  background: lightslategrey;
}

如您所见，:nth-of-type 接受一个参数：它可以是单个整数、“even” 或 “odd” 关键字，或者如上所示的公式。如果指定了整数，则只会选择一个元素——但关键字或公式将遍历父元素的所有子元素并选择匹配的元素——类似于在 JavaScript 中遍历数组中的项目。关键字“even” 和 “odd” 很简单，但公式使用语法 an+b 构建，其中

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

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

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

幸运的是，您并不总是需要自己进行计算——有几个 :nth-of-type 测试器和生成器可以使用

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

兴趣点

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

相关属性

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

其他资源

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

浏览器支持

有关 mdn-css__selectors__nth-of-type 功能在主要浏览器中的支持数据

:nth-of-type 在 CSS 选择器模块 3 中引入，这意味着旧版本的浏览器不支持它。但是，现代浏览器支持是完美的，新的伪选择器在生产环境中被广泛使用。如果您需要更旧的浏览器支持，请 为 IE 使用 polyfill，或者使用这些选择器以渐进增强的形式进行非关键性使用，建议这样做。