如何将样式应用于每第 n 个大小为 m 的集合？

Question

在 css 中，您可以使用 :nth-child:

将样式应用于每个 nth 项目

li:nth-child(3) {
  background: green;
}

这将使每隔 3 行变为绿色。但是，如果我想让我的行的样式设置为 3 白色、3 绿色、重复的样式怎么办？

 1  2  3 [4][5][6] 7  8  9 [10][11][12]

更复杂：如果我想让行的样式为 3 白色、2 绿色、重复的样式怎么办？

 1  2  3 [4][5] 6  7  8 [9][10] 11  12

最后：如果我只想突出显示总数 length/3 的剩余部分（括号中的位置）怎么办？

[1]
[1][2]
[1][2][3]
 1  2  3 [4]
 1  2  3 [4][5]
 1  2  3 [4][5][6]
 1  2  3  4  5  6 [7]
 1  2  3  4  5  6 [7][8]
 1  2  3  4  5  6 [7][8][9]

有没有办法在 CSS 中完成这些模式？

Answer 1

您可以像这样使用逗号运算符：

:nth-child(6n-2), /* 4, 10, 16, 22, ... */
:nth-child(6n-1), /* 5, 11, 17, 23, ... */
:nth-child(6n)    /* 6, 12, 18, 24, ... */

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
li {
  display: inline-block;
  padding: 5px;
}
li:nth-child(6n-2),
li:nth-child(6n-1),
li:nth-child(6n) {
  background: green;
}

<ul><li>01</li></ul>
<ul><li>01</li><li>02</li></ul>
<ul><li>01</li><li>02</li><li>03</li></ul>
<ul><li>01</li><li>02</li><li>03</li><li>04</li></ul>
<ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li></ul>
<ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li></ul>
<ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li></ul>
<ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li></ul>
<ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li><li>09</li></ul>
<ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li><li>09</li><li>10</li></ul>
<ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li><li>09</li><li>10</li><li>11</li></ul>
<ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li><li>09</li><li>10</li><li>11</li><li>12</li></ul>

:nth-child(5n-1), /* 4,  9, 14, 19, ... */
:nth-child(5n)    /* 5, 10, 15, 20, ... */

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
li {
  display: inline-block;
  padding: 5px;
}
li:nth-child(5n-1),
li:nth-child(5n) {
  background: green;
}

<ul><li>01</li></ul>
<ul><li>01</li><li>02</li></ul>
<ul><li>01</li><li>02</li><li>03</li></ul>
<ul><li>01</li><li>02</li><li>03</li><li>04</li></ul>
<ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li></ul>
<ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li></ul>
<ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li></ul>
<ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li></ul>
<ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li><li>09</li></ul>
<ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li><li>09</li><li>10</li></ul>
<ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li><li>09</li><li>10</li><li>11</li></ul>
<ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li><li>09</li><li>10</li><li>11</li><li>12</li></ul>

您可以将它与 :nth-last-child 结合使用：

li:nth-child(3n-2):nth-last-child(-n+3), /* is in 1,4,7,... and in the last 3 */
li:nth-child(3n-1):nth-last-child(-n+2), /* is in 2,5,8,... and in the last 2 */
li:nth-child(3n):nth-last-child(-n+1)    /* is in 3,6,9,... and in the last 1 */

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
li {
  display: inline-block;
  padding: 5px;
}
li:nth-child(3n-2):nth-last-child(-n+3),
li:nth-child(3n-1):nth-last-child(-n+2),
li:nth-child(3n):nth-last-child(-n+1)
{
  background: green;
}

<ul><li>01</li></ul>
<ul><li>01</li><li>02</li></ul>
<ul><li>01</li><li>02</li><li>03</li></ul>
<ul><li>01</li><li>02</li><li>03</li><li>04</li></ul>
<ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li></ul>
<ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li></ul>
<ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li></ul>
<ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li></ul>
<ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li><li>09</li></ul>
<ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li><li>09</li><li>10</li></ul>
<ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li><li>09</li><li>10</li><li>11</li></ul>
<ul><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li><li>06</li><li>07</li><li>08</li><li>09</li><li>10</li><li>11</li><li>12</li></ul>

Answer 2

也许这可以帮到你？

来自 w3schools

Using a formula (an + b). Description: a represents a cycle size, n is a counter (starts at 0), and b is an offset value.

在SO

中也发现了类似的问题

附上来自 w3schools 的示例代码

<!DOCTYPE html>
<html>
<head>
<style> 
p:nth-child(3n+0) {
    background: #ff0000;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
<p>The fifth paragraph.</p>
<p>The sixth paragraph.</p>
<p>The seventh paragraph.</p>
<p>The eight paragraph.</p>
<p>The ninth paragraph.</p>

<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :nth-child() selector.</p>

</body>
</html>

Answer 3

在 CSS3 中，您可以将 a * n + b 形式的简单公式输入到 :nth-child() 选择器，写作 an + b，其中 a 和 b 是常量，n 是自由变量。然后，该样式将影响其位置编号与 n 的某些 natural 值（整数 >= 0）的表达式匹配的元素。这意味着 5n + 11 将匹配第 11 个和第 16 个元素，但不会匹配第 6 个。 Source.

这是你想要的代码：

li:nth-child(6n + 4), li:nth-child(6n + 5), li:nth-child(6n + 6) {
  background: green;
}

关于你的第二个问题：

li:nth-child(5n + 4), li:nth-child(5n + 5) {
  background: green;
}

我对你的最后一个问题感到困惑，但听起来可行。

如何将样式应用于每第 n 个大小为 m 的集合？

How do I apply a style to every nth set of size m?

css

css-selectors