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

Question

所以我有一个元素列表，我希望它们能相应地设置样式。

如上图所示，我有4种不同的颜色，如果添加其他元素，我希望该颜色将是红色。但是我不确定该怎么做。

我无法制作:nth-child(1n)等，因为显然它将使用该代码来使用其他元素。我知道我只能使用:first-child，但是如何在接下来的4个元素中应用这些颜色，以此类推？

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

Answer 1

nth-child的公式为an+b，因此您可以为nth-child(4n)（+0）设置颜色，为nth-child(4n+1)，nth-child(4n+2)设置颜色，然后为nth-child(4n+3)

https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_nth-child_formula

Answer 2

由于必须在4个元素之后重复，因此请在4n选择器中使用nth-child。

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;
}

JSFiddle example