我正在尝试使用 nth-child 为其他每组 5 行着色。 下面的代码有效,但我并不总是知道总共有多少行。 它们始终是 5 的倍数。
p:nth-child(n+8):nth-child(-n+12),:nth-child(n+18):nth-child(-n+22) {
background: #ff0000;
}
<h1>This is a heading</h1>
<p>The 1 paragraph.</p>
<p>The 2 paragraph.</p>
<p>The 3 paragraph.</p>
<p>The 4 paragraph.</p>
<p>The 5 paragraph.</p>
<p>The 6 paragraph.</p>
<p>The 7 paragraph.</p>
<p>The 8 paragraph.</p>
<p>The 9 paragraph.</p>
<p>The 10 paragraph.</p>
<p>The 11 paragraph.</p>
<p>The 12 paragraph.</p>
<p>The 13 paragraph.</p>
<p>The 14 paragraph.</p>
<p>The 15 paragraph.</p>
<p>The 16 paragraph.</p>
<p>The 17 paragraph.</p>
<p>The 18 paragraph.</p>
<p>The 19 paragraph.</p>
<p>The 20 paragraph.</p>
<p>The 21 paragraph.</p>
<p>The 22 paragraph.</p>
<p>The 23 paragraph.</p>
<p>The 24 paragraph.</p>
<p>The 25 paragraph.</p>
无论行数是多少,有没有办法使用 nth-child 来执行此操作?
斯科特
最佳答案
您可以尝试这个(最好使用nth-of-type
)。
p:nth-of-type(10n + 6),
p:nth-of-type(10n + 7),
p:nth-of-type(10n + 8),
p:nth-of-type(10n + 9),
p:nth-of-type(10n + 10) {
background: red;
}
<h1>This is a heading</h1><p>The 1 paragraph.</p><p>The 2 paragraph.</p><p>The 3 paragraph.</p><p>The 4 paragraph.</p><p>The 5 paragraph.</p><p>The 6 paragraph</p><p>The 7 paragraph.</p><p>The 8 paragraph.</p><p>The 9 paragraph.</p><p>The 10 paragraph.</p><p>The 11 paragraph.</p><p>The 12 paragraph.</p><p>The 13 paragraph.</p><p>The 14 paragraph.</p><p>The 15 paragraph.</p><p>The 16 paragraph.</p><p>The 17 paragraph.</p><p>The 18 paragraph.</p><p>The 19 paragraph.</p><p>The 20 paragraph.</p><p>The 21 paragraph.</p><p>The 22 paragraph.</p><p>The 23 paragraph.</p><p>The 24 paragraph.</p><p>The 25 paragraph.</p>
关于css - 使用 nth-child 的 5 行色 block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36653526/