在对一组子元素应用 An+B 逻辑之前，预先过滤一组子元素。
:nth-child() 和 :nth-last-child() 伪类选择器
使用 :nth-child() 伪类选择器，可以在 DOM 中按索引选择元素。您可以使用 An+B 微语法精确控制要选择哪些元素。
:nth-child(2)：选择第二个子级。:nth-child(2n)：选择所有子节点（例如 2nd、4th、6th、8th 等）。:nth-child(2n+1)：选择所有奇数子项（第 1、3、5、7，依此类推）。:nth-child(5n+1)：选择第 1 个 (=(5×0)+1)、第 6 个 (=(5×1)+1)、第 11 个 (=(5×2)+1)...子级。:nth-child(5n+2)：选择第 2 个 (=(5×0)+2)、第 7 个 (=(5×1)+2)、第 12 个 (=(5×2)+2)... 子项。
不过，如果您省略 A 参数，还可以选择更多广告素材。例如：
:nth-child(n+3)：选择第 3 个（第 3 个、第 4 个、第 5 个，依此类推）中的每个子级。:nth-child(-n+5)：选择不超过第 5 个子级（第 1 个、第 2 个、第 3 个、第 4 个、第 5 个）。
结合这些 :nth-child() 选项中的几项内容，您便可以选择元素范围：
:nth-child(n+3):nth-child(-n+5)：选择第 3 个到第 5 个（第 3 个、第 4 个、第 5 个）的每个子级。
使用 :nth-last-child() 时，您也可以进行类似的选择，但不是从头开始计数，而是从头开始计数。
使用 of S 语法预先过滤所选数据
CSS 选择器级别 4 中的新功能是可以选择将选择器列表传递到 :nth-child() 和 :nth-last-child()。
:nth-child(An+B [of S]?)
:nth-last-child(An+B [of S]?)
指定 of S 后，An+B 逻辑仅应用于与给定选择器列表 S 匹配的元素。这实际上意味着，您可以在 An+B 执行操作之前预先过滤子项。
浏览器支持
- 111
- 111
- 113
- 9
示例
例如，:nth-child(2 of .highlight) 会选择具有 .highlight 类的第二个匹配元素。换个说法：从课程 .highlight 的所有孩子中，选择第二个孩子。
这与 .highlight:nth-child(2) 相反，后者选择具有 .highlight 类并且也是第二个子元素的元素。
在下面的演示中，您可以看到这种不同：
- 与
:nth-child(2 of .highlight)匹配的元素带有粉色轮廓。 - 与
.highlight:nth-child(2)匹配的元素带有绿色轮廓。
请注意，S 是一个选择器列表，这意味着它接受以英文逗号分隔的多个选择器。例如，:nth-child(4 of .highlight, .sale) 会从一组同级元素中选择第四个元素（.highlight 或 .sale）。
在下面的演示中，与 :nth-child(4 of .highlight, .sale) 匹配的元素应用了橙色的轮廓。
斑马纹再见
使用 :nth-child() 的一个典型示例就是创建斑马线表。这是一种视觉技术，让表格中的每一行都交替显示颜色。通常，可以按如下方式处理：
tr:nth-child(even) {
background-color: lightgrey;
}
虽然这对静态表很有效，但当您开始动态过滤表内容时，就会出现问题。例如，当第 2 行被隐藏时，最终会显示第 1 行和第 3 行，且每行的背景颜色相同。
为解决此问题，我们可以通过从 An+B 逻辑中排除隐藏行来利用 :nth-child(An+B [of S]?)：
tr:nth-child(even of :not([hidden])) {
background-color: lightgrey;
}
很不错吧？
照片由 Markus Spiske 拍摄，选自 Unsplash 网站