css - 不同li的边框颜色不同

Question

我正在尝试制作一个帖子系统，其中我希望每个帖子都有不同的右边框颜色。但我想最多使用 4 种颜色。前四个帖子将有四种不同的颜色，然后接下来的四个帖子将再次使用前四个帖子的颜色(每四个帖子再次不同)。我知道如何通过 css 中的奇数和偶数第 n 个元素来做到这一点。例如我试过:

li:nth-child(odd) {
  border-left:1px solid #ff0000;
}
li:nth-child(even) {
  border-left:1px solid #0000ff;
}

如何按照我想要的方式进行:前四个颜色不同，然后接下来的四个颜色相同，接下来的四个颜色再次相同？

Answer 1

使用这些:

li:nth-child(4n+1) { /* Every first */
  border-left:1px solid #ff0000;
}
li:nth-child(4n+2) { /* Every second */
  border-left:1px solid #0000ff;
}
li:nth-child(4n+3) { /* Every third */
  ...
}
li:nth-child(4n+4) {/* Every fourth */
  ...
}