如何高效地选择 CSS 中的每第 N 个元素？

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

问题：

是否有一种有效的方法来选择 CSS 中的每个第 n 个元素元素集，不列出每个元素

答案：

是的，使用带有算术表达式的 :nth-child() 伪类，您可以基于选择元素在子列表中的位置。

语法:nth-child() 允许进行各种算术运算，包括：

• 加法 ( )
• 减法 (-)
• 系数乘法(an)

例如，要选择每四个元素，请使用以下命令选择器：

此表达式从 0 开始计数，因此它将选择：

• 4（第 0 个子级）
• 8（第 1 个子级）
• 12（第二个孩子）
• 16（第三个孩子） child)

注意：如果父元素中有不同类型的元素（例如 div、h1、p），则应使用 :nth-of -type() 而不是 :nth-child() 以确保只计算指定的元素type.

示例：

假设以下 HTML：

要选择每四个 div 元素，请使用：

这将选择：

• div 1
• div 5
• div 9
• div 13

特殊情况：

使用4n 相当于4n 4 就 :nth-child() 而言。这是因为计数从 0 开始。因此，以下选择器将选择相同的元素：

• :nth-child(4n)
• :nth-child(4n 4)

但是，对于其他第 n 个运算符和值，情况可能并不总是如此。

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