Question

在css中，您可以使用nth将样式应用于每个:nth-child项：

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

最后：如果我只想突出总长度的剩余部分/ 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

使用公式（a + b）。描述：a表示循环大小，n是计数器（从0开始），b是偏移值。

在SO

中也发现了类似的问题

w3schools附带的示例代码

String ToCastStringName = "Truck";

Answer 3

在CSS3中，您可以输入a * n + b形式的简单公式到:nth-child()选择器，写为an + b，其中a和b是常量n是一个自由变量。然后，该样式将影响其位置编号与n的某些自然值的表达式匹配的元素（整数＆gt; = 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？

3 个答案: