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

| 可以将nth-child取模吗？我知道您可以指定一个公式，例如

nth-child(4n+2)

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

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

已邀请:

4 个回复

你换

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

要回复问题请先登录或注册

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

4 个回复

发起人

css_selectors

modulo

css

css3

问题状态

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

与内容相关的链接

4 个回复

发起人

css_selectors

modulo

css

css3

问题状态