如何使用 `nth-child()` 高效地选择 CSS 中的每个第 N 个元素？

选择 CSS 中的每个第 N 个元素

CSS 中的 nth-child() 选择器提供了一种便捷的方法来定位其内的特定子元素父元素。然而，单独列出第 n 个孩子可能会很麻烦。有没有更高效的方法？

在 nth-child() 中使用算术表达式

nth-child() 的真正强大之处在于它能够合并算术使用“n”变量的表达式。此变量表示子元素在其父元素中的位置。

每 4 个元素的简化选择器

要选择每四个 div 元素，请将各个选择器替换为以下：

div:nth-child(4n)

该表达式表示选择器匹配任何 4 的倍数的 div 元素（例如，0, 4, 8, 12）。

通过算术自定义

n 变量允许进一步自定义。例如：

• 2n - 1：匹配奇数个 div 元素（例如 1、3、5）。
• 4n 2：匹配位置为 4 的倍数以上的 div 元素（例如 2、 6, 10).

均衡算术表达式

虽然 4n 和 4n 4 乍一看似乎相同，但其实不然。 nth-child() 从 0 开始计数。 4n 将匹配位置 0, 4, 8 的元素，而 4n 4 将匹配位置 4, 8, 12 的元素。

以上是如何使用 `nth-child()` 高效地选择 CSS 中的每个第 N 个元素？的详细内容。更多信息请关注PHP中文网其他相关文章！