具有mod或模运算符的nth-child

问题描述

| 可以将

nth-child

取模吗？我知道您可以指定一个公式，例如

nth-child(4n+2)

但是我似乎找不到是否有模运算符。我已经尝试了以下示例，但似乎都无法正常工作：

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

    

解决方法

不，

:nth-child()

仅支持加法，减法和系数乘法。 我搜集到您正在尝试获取前6个元素（因为任何正整数

n

的

n mod 7

只会使您从

0

到

6

）。为此，您可以改用以下公式：

:nth-child(-n+6)

通过否定ѭ5，元素计数从零开始向后进行，因此将选择以下元素：

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

jsFiddle演示     ,如果要将

nth-child

与模

k

一起使用，只需指定：

nth-child(kn)

例如，如果要为3、6、9，..元素指定样式，只需指定（

k

= 3），然后使用：

nth-child(3n)

您还可以指定偏移量：

nth-child(kn+offset)

    ,我知道这个话题很老了，但这是对模运算符的足够接近的答案：

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

这将选择元素1-6、8-13，依此类推...

:nth-child(an)

上面的代码将选择可被\“ a \”整除的元素，因此添加：not（）选择器将强制CSS选择不可被\“ a \”整除的元素。 我希望有人觉得它有用;）     ,我知道这个话题很老，但这是答案：

    .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公式表示的最后一组完整子集中的最后一个子之后的所有子。