html - 与CSS分组的序列:nth-​​child

ul,li {
  display: block;
  margin:0;
  padding:0;
  list-style:none;
}
li {
  background: black;
  color: white;
  padding: 10px;
}
li:nth-child(2n+2) {
  background: red;
}
li:nth-child(3n+3) {
  background: green;
}
li:nth-child(4n+4) {
  background: blue;
}

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
  <li>seven</li>
  <li>eight</li>
  <li>nine</li>
  <li>ten</li>
  <li>eleven</li>
  <li>twelve</li>
</ul>

我需要的是：
黑色
红色
绿色
蓝色
黑色
红色
绿色
蓝色
...
... 如何使用:nth-child实现此目标？

最佳答案

给定nth-child语法

:nth-child( <an-plus-b>  )

您需要使用4n+b进行迭代
所以，
对于背景，red将是4n+2so，4x0+2，4x1+2，4x2+2等等，这将为您提供元素2，6，10
对于背景，green将是4n+3so，4x0+3，4x1+3，4x2+3等等，这将为您提供元素3，7，11
对于背景，它是，所以，'blue，4n+4，4x0+4等等，这给了你元素4，8，12
根据4x1+4中的属性，默认情况下，其余元素1、5、9将被着色4x2+4

ul,li {
  display: block;
  margin:0;
  padding:0;
  list-style:none;
}
li {
  background: black;
  color: white;
  padding: 10px;
}
li:nth-child(4n+2) {
  background: red;
}
li:nth-child(4n+3) {
  background: green;
}
li:nth-child(4n+4) {
  background: blue;
}

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
  <li>seven</li>
  <li>eight</li>
  <li>nine</li>
  <li>ten</li>
  <li>eleven</li>
  <li>twelve</li>
</ul>