如何使用CSS nth-child公式实现每4项切换奇偶的列表样式

存在可适配任意列表项数量的 nth-child 写法，你给出的样式规律实际为8个列表项为一组循环，直接按分组匹配对应位置即可。

完整可运行代码如下：

/* 匹配绿色项 */
li:nth-child(8n+1),
li:nth-child(8n+3),
li:nth-child(8n+6),
li:nth-child(8n+8) {
  color: green;
}

/* 匹配橙色项 */
li:nth-child(8n+2),
li:nth-child(8n+4),
li:nth-child(8n+5),
li:nth-child(8n+7) {
  color: orange;
}

<ul>
  <li>Green Item</li>
  <li>Orange Item</li>
  <li>Green Item</li>
  <li>Orange Item</li>
  <li>Orange Item</li>
  <li>Green Item</li>
  <li>Orange Item</li>
  <li>Green Item</li>
  <li>Green Item</li>
  <li>Orange Item</li>
  <li>Green Item</li>
  <li>Orange Item</li>
</ul>

规则验证 #

你给出的前12项颜色和序号对应关系完全符合8项循环的规律：

• 8n+1：第1、9、17…项 → 绿色
• 8n+2：第2、10、18…项 → 橙色
• 8n+3：第3、11、19…项 → 绿色
• 8n+4：第4、12、20…项 → 橙色
• 8n+5：第5、13、21…项 → 橙色
• 8n+6：第6、14、22…项 → 绿色
• 8n+7：第7、15、23…项 → 橙色
• 8n+8：第8、16、24…项 → 绿色

该写法不受列表项数量限制，所有新添加的列表项都会自动匹配对应颜色规则。

内容的提问来源于stack exchange，提问作者noclist