Html 每4个项目交替使用颜色

纯CSS是否可以创建每4项交替的颜色网格。如；前4项为蓝色，下4项为红色，然后下4项为蓝色，依此类推

项目1=蓝色
项目2=蓝色
项目3=蓝色
项目4=蓝色
项目5=红色
项目6=红色
项目7=红色
项目8=红色
第9项=蓝色

我想这就是你要找的

如果没有，请告诉我

div:n子级（2n）{
颜色：蓝色；
}
分区：第n个孩子（第3个）{
颜色：绿色；
}
分区：第n个孩子（4n）{
颜色：红色；
}

项目1=蓝色
项目2=蓝色
项目3=蓝色
项目4=蓝色
项目5=红色
项目6=红色
项目7=红色
项目8=红色
项目9=蓝色

您可以使用一些详细的第n个子逻辑-请参阅下面的演示：

div:n子项（4n），
分区：第n个孩子（4n-1），
分区：第n个孩子（4n-2），
分区：第n个孩子（4n-3）{
颜色：蓝色；
}
分区：第n个孩子（8n），
分区：第n个孩子（8n-1），
分区：第n个孩子（8n-2），
分区：第n个孩子（8n-3）{
颜色：红色；
}
/*样式*/
身体{
计数器复位：计数器；
}
div{
计数器增量：计数器；
}
部门：之后{
内容：柜台（柜）；
}

---

使用红色的默认规则和蓝色的偏移量重复的规则是可能的

8n+1

的语法每8个偏移量乘以1，然后重复该语法以得到1到4

div{
颜色：红色；
}
分区：第n个子（8n+1），
分区：第n个子（8n+2），
分区：第n个孩子（8n+3），
分区：第n个子（8n+4）{
颜色：蓝色；
}

项目1=蓝色
项目2=蓝色
项目3=蓝色
项目4=蓝色
项目5=红色
项目6=红色
项目7=红色
项目8=红色
第9项=蓝色

您的蓝色文本是绿色和红色的：他希望蓝色在前4次出现，然后在下4次出现红色，然后在下4次出现蓝色。