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

Question

所以我有一个元素列表，我希望它们具有相应的样式。

正如您在上图中看到的那样，我有 4 种不同的颜色，如果添加另一个元素，我希望颜色会是红色。但我不确定该怎么做。

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

为了更清楚地说明我想要实现的目标，您可以引用这张图片:

Answer 1

因为您必须在 4 个元素之后重复，所以在 nth-child 选择器中使用 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;
}

JSFiddle example