使用mod(或modulo)运算符的第n个子级

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()仅支持加法、减法和系数乘法。

我猜你正试图选取前6个元素（因为任何正整数n的n mod 7只会给你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演示

Answer 3

我知道这个话题很古老，但这里的答案足够接近模运算符：

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

这将选择元素1-6、8-13等等…

:nth-child(an)

上面的代码将选择可被"0"整除的元素；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;
    }

此选择器的目标是位于由第n个子公式表示的最后一整组分组子项中最后一个子项之后的所有子项。

Answer 5

如果您想用n=2取模，则可以使用偶数或奇数。

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