使用 S 语法更好地控制 :nth-child() 选择

在对一组子元素应用 An+B 逻辑之前，先对其进行预过滤。

Bramus

:nth-child() 和 :nth-last-child() 伪类选择器

借助 :nth-child() 伪类选择器，可以按索引选择 DOM 中的元素。使用 An+B 微语法，您可以精细地控制要选择的元素。

• :nth-child(2)：选择第二个子元素。
• :nth-child(2n)：选择所有偶数子元素（第 2 个、第 4 个、第 6 个、第 8 个，依此类推）。
• :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 执行操作之前预过滤子项。

示例

例如，: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;
}

虽然这种方法对于静态表来说效果不错，但当您开始动态过滤表内容时，就会出现问题。例如，当第二行被隐藏时，第一行和第三行会显示出来，但它们的背景颜色相同。

为了解决此问题，我们可以利用 :nth-child(An+B [of S]?) 从 An+B 逻辑中排除隐藏的行：

tr:nth-child(even of :not([hidden])) {
  background-color: lightgrey;
}

很棒，对吧？

照片由 Markus Spiske 拍摄，选自 Unsplash 网站