:nth-child

:nth-child 选择器允许您根据公式选择一个或多个元素，这些元素基于其源顺序。

/* Select the first list item */
li:nth-child(1) { }

/* Select the 5th list item */
li:nth-child(5) { }

/* Select every other list item starting with first */
li:nth-child(odd) { }

/* Select every 3rd list item starting with first */
li:nth-child(3n - 2) { }

/* Select every 3rd list item starting with 2nd */
li:nth-child(3n - 1) { }

/* Select every 3rd child item, as long as it has class "el" */
.el:nth-child(3n) { }

它在 CSS 选择器级别 3 规范 中被定义为“结构性伪类”，这意味着它用于根据内容与其父元素和兄弟元素的关系来设置内容的样式。

假设我们正在构建一个 CSS 网格，并且想要删除每个第四个网格模块上的边距。这是该 HTML 代码

<section class="grid">
  <article class="module">One</article>
  <article class="module">Two</article>
  <article class="module">Three</article>
  <article class="module">Four</article>
  <article class="module">Five</article>
</section>

与其向每个第四个项目添加一个类（例如 .last），我们可以使用 :nth-child

.module:nth-child(4n) {
  margin-right: 0;
}

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

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

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

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

幸运的是，您并不总是需要自己进行计算——有很多 :nth-child 测试器和生成器

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

:nth-child(an + b of <selector>)

根据 CSS 选择器 规范，可以向 :nth-child 添加一个鲜为人知的过滤器：能够使用 of 格式选择元素子集的 :nth-child。假设您有一个混合内容列表：有些具有类 .video，有些具有类 .picture，并且您想选择前 3 张图片。您可以使用“of”过滤器执行此操作，如下所示

:nth-child(-n+3 of .picture) {
  /* 
     Selects the first 3 elements
     applied not to ALL children but 
     only to those matching .picture 
  */
}

请注意，这与将选择器直接附加到 :nth-child 选择器不同

.picture:nth-child(-n+3) {
  /* 
     Not the same! 
     This applies to elements matching .picture 
     which _also_ match :nth-child(-n+3)  
  */
}

这可能会有点令人困惑，因此一个示例可能有助于说明差异

对“of”过滤器的浏览器支持非常有限：截至撰写本文时，只有 Safari 支持此语法。要检查您喜欢的浏览器的状态，以下是有关 :nth-child(an+b of s) 的开放问题

• Firefox：支持 nth-child(An+B of sel)
• Chrome：实现 :nth-child(an+b of S)

关注点

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

相关属性

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

其他资源

• 有用的 :nth-child 食谱
• Mozilla 文档
• QuirksMode 文章
• Sitepoint 文章

浏览器支持

Chrome	Safari	Firefox	Opera	IE	Android	iOS
任意	3.2+	任意	9.5+	9+	任意	任意

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