如何交替设置4个元素的样式并使用css重复？

因此，我有一个元素列表，我希望他们的风格相应

正如你在上面的图片中看到的，我有4种不同的颜色，如果添加其他元素，我希望颜色是红色。但我不知道怎么做

我无法生成

：第n个子元素（1n）

等等，因为显然它将使用该代码获取其他元素。我知道我可以只使用

：first child

，但是如何在接下来的4个元素中应用这些颜色等等

为了更清楚地说明我想要实现的目标，您可以参考以下图片：

---

第n个孩子的公式是

an+b

，因此您可以为第n个孩子（4n）（+0）设置一种颜色，另一种颜色用于第n个孩子（4n+1），第n个孩子（4n+2）和第n个孩子（4n+3）

---

第n个孩子的公式是

an+b

，因此您可以为第n个孩子（4n）（+0）设置一种颜色，另一种颜色用于第n个孩子（4n+1），第n个孩子（4n+2）和第n个孩子（4n+3）

---

由于必须在4个元素之后重复，请在

n子项

选择器中使用

4n

li:nth-child(4n+1) {
  color: blue;
}

li:nth-child(4n+2) {
  color: green;
}

li:nth-child(4n+3) {
  color: pink;
}

li:nth-child(4n+4) {
  color: red;
}

---

由于必须在4个元素之后重复，请在

n子项

选择器中使用

4n

li:nth-child(4n+1) {
  color: blue;
}

li:nth-child(4n+2) {
  color: green;
}

li:nth-child(4n+3) {
  color: pink;
}

li:nth-child(4n+4) {
  color: red;
}