CSS :nth-child 的分组序列

Question

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>

我需要什么:

1. 黑色
2. 红色
3. 绿色
4. 蓝色
5. 黑色
6. 红色
7. 绿色
8. 蓝色
9. ...

...如何使用 :nth-child 实现此目的？

Answer 1

给定 nth-child 语法

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

您需要使用 4n+b

进行迭代

所以，

对于背景 red 它将是 4n+2 所以，4x0+2、4x1+2、4x2+2 等等，这给你元素 2、6 , 10

对于背景 green 它将是 4n+3 因此，4x0+3、4x1+3、4x2+3 等等，这会为您提供元素 3、7 , 11

和背景 'blue，它将是 4n+4 所以，4x0+4，4x1+4，4x2+4 等等，这给你元素 4 , 8, 12

考虑到 li

中的 属性，其余元素 1、5、9 将默认着色为 black

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>

Answer 2

您可以使用 nth-child 来完成，如下所示

因为索引 1,5 和 9 需要黑色，所以可以处理 4n+1 索引 2、6、10 为红色，可以用 4n+2

处理

检查这个片段

ul,
li {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
li {
  background: black;
  color: white;
  padding: 10px;
}
li:nth-child(4n+1) {
  background: black;
}
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>

希望对您有所帮助