具有mod(或modulo)运算符的nth-child

Question

是否可以使用nth-childwith modulo？我知道你可以指定一个公式,比如

nth-child(4n+2)

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

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

Answer 1

如果要使用nth-childmodulo k,只需指定:

nth-child(kn)

例如,如果要为3,6,9 ,..元素指定样式,只需指定(k= 3),并使用:

nth-child(3n)

您还可以指定偏移量:

nth-child(kn+offset)

Answer 2

不,:nth-child()仅支持加法,减法和系数乘法.

我猜你想拿起第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演示

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;
    }

此选择器针对在您的第 n 个孩子公式表示的最后一组完整分组孩子中的最后一个孩子之后的所有孩子。