Css 根据不同的li使用不同的边框颜色

我正在尝试制作一个帖子系统，希望每个帖子的右边框颜色不同。但是我想使用最多4种颜色。前四篇文章将有四种不同的颜色，然后接下来的四篇文章将有前四篇文章的颜色（每四篇文章的颜色也不同）。我知道如何通过css中的奇数和偶数第n个元素来实现。例如，我尝试：

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

如何按我想要的方式进行：前四种颜色不同，后四种颜色相同，后四种颜色相同？

使用这些：

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 */
  ...
}

使用这些：

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 */
  ...
}

---

你应该在服务器端完成。服务器端脚本使用什么？可以通过css完成。我使用的是简单的css。也许你可以尝试使用

：nth child（Xn+-Y）

公式，这样你就可以确保第一、第二、第三和第四个，也可以用这种方式声明“特殊”的（第三和第四个）可以覆盖第一个和第二个。@gurprethingh好的，有js/jquery我没有任何可能problem@banzsh确切地说，我正在尝试使用它，但颜色的顺序不正确。你能帮我吗？你应该在服务器端这样做。服务器端脚本使用什么？可以通过css完成。我使用的是简单的css。也许你可以尝试使用

：nth child（Xn+-Y）

公式，这样你就可以确保第一、第二、第三和第四个，也可以用这种方式声明“特殊”的（第三和第四个）可以覆盖第一个和第二个。@gurprethingh好的，有js/jquery我没有任何可能problem@banzsh确切地说，我正在尝试使用它，但是颜色的顺序不正确。你能帮我吗？@Param Veer如果你需要再次使用第n个孩子进行测试，你可以试试这个。值得注意的是，IE8及以下版本不支持这个伪类。因此，如果跨浏览器兼容性对您很重要，您可以使用jQuery和上面相同的代码将类应用于第1、第2、第3和第4个类，然后指定这些类中的样式。@感谢您告诉我这一点。我支持ie9。尽管我会很快制作jquery版本：）@Param Veer如果您需要再次使用第n个孩子进行测试，您可以试试这个。值得注意的是，IE8及以下版本不支持这个伪类。因此，如果跨浏览器兼容性对您很重要，您可以使用jQuery和上面相同的代码将类应用于第1、第2、第3和第4个类，然后指定这些类中的样式。@感谢您告诉我这一点。我支持ie9。虽然我很快就会制作jquery版本：）