Question

是否可以将nth-child与模数一起使用？我知道你可以指定一个公式，比如

nth-child(4n+2)

但我似乎无法找到是否有模运算符。我在下面尝试了以下示例，但似乎都没有效果：

nth-child(n%7)
nth-child(n % 7)
nth-child(n mod 7)

Answer 1

如果您想将nth-child与模k一起使用，请指定：

nth-child(kn)

例如，如果要为 3,6,9，.. 元素指定样式，只需指定（k = 3），然后使用：

nth-child(3n)

您还可以指定偏移量：

nth-child(kn+offset)

Answer 2

不，:nth-child()仅支持加，减和coefficient multiplication。

我认为您正在尝试获取前6个元素（对于任何正整数n mod 7，n仅为0提供6）。为此，您可以改为使用此公式：

:nth-child(-n+6)

通过否定n，元素计数从零开始向后完成，因此将选择这些元素：

 0 + 6 = 6
-1 + 6 = 5
-2 + 6 = 4
-3 + 6 = 3
-4 + 6 = 2
-5 + 6 = 1
...

jsFiddle demo

Answer 3

我知道这个主题已经很老了，但是这里的答案很接近模运算符：

:not(:nth-child(7n))

这将选择元素1-6,8-13等......

:nth-child(an)

上面的代码将选择可被“a”整除的元素，因此添加：not（）选择器强制CSS选择不能被“a”整除的元素。

我希望有人觉得它很有用;）

Answer 4

我知道这个话题很老，但这是答案：

    .parent :nth-child(4n):nth-last-child(2) ~ *,
    .parent :nth-child(4n):nth-last-child(3) ~ *,
    .parent :nth-child(4n):nth-last-child(4) ~ * {
        color: gold;
    }

此选择器定位由您的nth-child公式表示的最后一组完整的分组孩子中位于最后一个孩子之后的所有孩子。

Answer 5

如果您想使用n=2进行模数运算，则可以使用偶数或奇数。

tr:nth-child(even) {
  background-color: #dddddd;
}

具有mod（或modulo）运算符的nth-child

5 个答案: