使用 mod（或模运算）操作符的 nth-child 函数

Question

使用nth-child和取模运算是否可行？我知道你可以指定一个公式，例如：

nth-child(4n+2)

但是我似乎找不到模运算符。我尝试了下面的示例，但没有一个有效：

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

- jefflunt

---

相关链接：https://joeyhoer.com/advanced-nth-child-selectors - But those new buttons though..

Answer 1

如果您想使用 nth-child 并带有模数 k，只需指定:

nth-child(kn)

例如，如果您想为3、6、9...等元素指定样式，只需指定（k = 3），并使用以下代码：

nth-child(3n)

您还可以指定偏移量：

nth-child(kn+offset)

- Athlan

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演示

- BoltClock

---

你很接近了，nth-child使用基于1的索引，而不是0。你需要使用-n + 7。 - zzzzBov

不，它从零开始索引n。":nth-child(an+b)" 伪类符号表示文档树中在该元素之前有 "an" + "b"-1 个兄弟节点，其中 "n" 的值为任何正整数或零。它仅说明第一个子元素的索引为 1，与 n 的索引无关。 - BoltClock

我改正了。很好的发现；我记得元素是基于1的索引，并且假设n索引相同，而没有重新阅读文档。 - zzzzBov

看起来我需要的功能不存在。不过这回答了我的问题。谢谢！ - jefflunt

这个答案已经不准确了。https://dev59.com/qG025IYBdhLWcg3wPzbL#59206065 - Aaron Cicali

这是不回答我的。 - Ethem

Answer 3

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

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

这将选择1到6，8到13等元素...

:nth-child(an)

上面的代码将选择可被 "a" 整除的元素，因此添加 :not() 选择器强制 CSS 选择不可被 "a" 整除的元素。

- Enethion

---

我没有考虑到提问者可能意味着 n mod 7 匹配任何不被7整除的元素。这看起来更接近原始问题所询问的内容，尽管我们仍然需要从提问者那里得到确认。 - BoltClock

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

这个选择器针对的是在由nth-child公式表示的最后一个完整的分组子元素之后的所有子元素。

- Aaron Cicali

---

这刚好为我解决了一个复杂的问题，谢谢！我用它来隐藏随机画廊末尾的额外图像，该画廊需要完美填充列和没有“落单者”（平衡计数比展示每个图像更重要）。这个问题是由于不同浏览器大小下列数目的变化而产生的，这意味着匹配均匀所需的通用倍数需要比系统能够保证的精度更高。与媒体查询结合使用后，画廊现在在3、4和5列时看起来很清爽，无论画廊中有多少图像。 - Riley

我发现了这篇写得很好的文章，解释了这个技术背后的原理，帮助我理解了实际发生了什么。我的具体问题略有不同：我需要选择图库中最后一行的所有元素。 这篇文章提供了这个问题的解决方案变种。 - DhyMik

Answer 5

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

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

- CDM social medias in bio