如何使用 CSS 的 :nth-child() 选择器选择每第 N 个元素？

使用 CSS 选择每个第 N 个元素

处理一组元素时，您可能希望定位每个第 n 个元素。 CSS 提供了 :nth-child() 选择器来促进此任务。

:nth-child(n) 允许您选择父元素中的第 n 个子元素。可以指定第 n 个值并执行加法、减法和系数乘法等算术运算。

div:nth-child(4)

此选择器将选择第四个 div 元素。但是，它需要为每个第 n 个元素编写单独的选择器。

:nth-child(an) 显着简化了此过程。 “a”表示可以使用算术运算应用于“n”的系数：

div:nth-child(4n)

此选择器将选择每四个 div 元素，有效地取代了对多个选择器的需要。

为了更好的控制，可以在选择器中使用算术表达式：

• :nth-child(an b)
• :nth-child(an - b)
• :nth-child(a*n)

示例： 至仅选择 div 元素，不包括 h1 或 p 等其他元素，使用 :nth-of-type() 而不是:nth-child():

body div:nth-of-type(4n)

注意：如果n省略，则默认为1，选择每个元素。

之间的差异4n 和 4n 4:

两个选择器每四个 div 匹配一次

• :nth-child(4n) 从 0 开始计数，所以会选择位置 4、8、12 的元素，等等
• :nth-child(4n 4)从4开始计数，所以它选择位置 4、8、12 等处的元素

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