如何用CSS创建动态序列颜色模式（适配未知数量元素）

你可以通过CSS的:nth-child()循环选择器实现自动适配任意数量动态元素的颜色模式，无需为每个元素单独编写样式。以下是具体实现方案：

基础实现（固定颜色循环） #

如果你的目标是蓝→深蓝→红的三颜色循环，直接使用带步长的nth-child选择器即可：

/* 第1、4、7...个元素应用蓝色 */
li:nth-child(3n + 1) {
  background-color: blue;
}

/* 第2、5、8...个元素应用深蓝色 */
li:nth-child(3n + 2) {
  background-color: darkblue;
}

/* 第3、6、9...个元素应用红色 */
li:nth-child(3n + 3) {
  background-color: red;
}

可维护性优化（用CSS变量管理颜色） #

如果后续需要修改颜色，推荐使用CSS变量统一管理，更便于维护：

:root {
  --cycle-color-1: blue;
  --cycle-color-2: darkblue;
  --cycle-color-3: red;
}

li:nth-child(3n + 1) {
  background-color: var(--cycle-color-1);
}

li:nth-child(3n + 2) {
  background-color: var(--cycle-color-2);
}

li:nth-child(3n + 3) {
  background-color: var(--cycle-color-3);
}

适配不同循环长度 #

如果你的颜色模式是4种或更多颜色，只需调整nth-child的步长值：
比如4色循环，把3n改为4n，然后对应新增4n+4的选择器即可。

这种纯CSS方案会自动根据元素数量重复颜色序列，完美适配动态生成的未知数量元素，彻底替代逐个设置样式的繁琐写法。

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