带有 mod（或模）运算符的 nth-child答案

【问题标题】：nth-child with mod (or modulo) operator带有 mod（或模）运算符的 nth-child
【发布时间】：2011-09-01 22:30:59
【问题描述】：

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

nth-child(4n+2)

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

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

【问题讨论】：

相关：joeyhoer.com/advanced-nth-child-selectors

标签： css css-selectors modulo

【解决方案1】：

如果您想使用 nth-child 和模 k，只需指定：

nth-child(kn)

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

nth-child(3n)

你也可以指定一个偏移量：

nth-child(kn+offset)

【讨论】：

【解决方案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

【讨论】：

你很接近，nth-child uses a 1 based index，而不是0。你想要-n + 7。
@zzzzBov：不，它从零开始索引n。 “:nth-child(an+b) 伪类表示法表示在文档树中具有an+b-1 个兄弟姐妹之前的元素，对于n 的任何正整数或零值”它只说明第一个孩子的索引为 1，这与 n 的索引无关。
我的立场是正确的。接得好;我记得元素是基于 1 的索引，并假设 n 索引是相同的，而无需重新阅读文档。
看起来我正在寻找的功能不存在。然而，这回答了我的问题。谢谢！
这个答案不再准确。 stackoverflow.com/a/59206065/586030

【解决方案3】：

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

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

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

:nth-child(an)

上面的代码会选择能被“a”整除的元素，所以添加 :not() 选择器会强制 CSS 选择不能被“a”整除的元素。

【讨论】：

我没有考虑过提问者可能意味着 n mod 7 匹配 n 不能被 7 整除的任何元素。这看起来比我的答案更接近原始问题的要求，尽管我们'仍然需要得到提问者的确认。

【解决方案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 公式表示的最后一个完整分组子级中最后一个子级之后的所有子级。

【讨论】：

这只是为我解决了一个复杂的问题，谢谢！我用它来隐藏随机画廊末尾的额外图像，这些图像需要完美填充列并且没有“落后者”（平衡计数比显示每张图像更重要）。之所以出现这个问题，是因为在不同的浏览器大小下列数会发生变化，这意味着要均匀匹配的画廊项目的公共倍数需要比系统能够保证的更高的精度。与媒体查询结合使用时，无论图库中有多少图片，图库现在在 3、4 和 5 列时看起来很干净。

【解决方案5】：

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

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

【讨论】：