nth-child无法实现真正随机颜色，因其依赖DOM位置而非内容；纯CSS方案只能做到规律分散，真随机需JS运行时注入CSS变量。
不能用 nth-child 实现真正随机颜色 —— 它只认 DOM 位置，不认内容，所谓“随机”只是静态轮播，一增删标签就全乱。
为什么 nth-child 配合 CSS 变量也做不到随机
有人把 nth-child(1) 到 nth-child(20) 全写死，每个设一个 --tag-color 值，再在通用规则里用 color: var(--tag-color)。这看似省事，实则埋了三个雷：
-
nth-child绑定的是序号，不是标签本身：加一个新标签，原来第 3 个变成第 4 个，颜色跟着偏移，语义完全错位 - 响应式下
display: none或 flex 换行不改变nth-child计数，但视觉顺序变了，颜色和用户感知脱钩 - 服务端渲染（SSR）时 JS 不执行，这套“随机”直接固化成固定映射，刷新前后颜色不变，根本不是随机
真随机必须靠 JS 运行时注入变量
核心是把“随机性”交给 JS 控制，但不写内联 style，而是用 element.style.setProperty() 注入 CSS 自定义属性，让样式逻辑仍集中在 CSS 中：
- 预定义一组协调色板，比如
['#4e73df', '#1cc88a', '#f6c23e', '#e74a3b']，避免撞色、保证可读性 - 遍历所有
.tag元素，用Math.random()取色，再调用el.style.setProperty('--tag-color', color) - CSS 里统一写
.tag { color: var(--tag-color); }，无需nth-child干预 - 若用 React/Vue 等框架，初始化需等节点挂载完成；动态新增标签时，得用
MutationObserver补充设色
如果硬要纯 CSS，只能接受“规律分散”而非随机
放弃“每次不同”的幻想，改用 HSL 色彩模型 + nth-child 做可控变化：
立即学习“前端免费学习笔记（深入）”；
- 写
.tag:nth-child(5n+1) { color: hsl(calc(360 / 7 * 1), 70%, 55%); }这类规则，靠角度偏移制造视觉差异 - 用
5n+1、5n+2而非1、2，能缓解增删导致的连续偏移（但不能根除） - 明度（lightness）和饱和度（saturation）保持固定，只变色相（hue），确保整体协调
- 注意：这种方案在 SSR 下表现稳定，但本质仍是确定性循环，不是随机
真正麻烦的点不在实现，而在边界——比如标签由后端 API 动态返回、前端又做局部过滤，DOM 顺序和数据顺序早已不一致。这时候连“规律分散”都容易失准，JS 注入变量反而是最可控的路径。
