如何用CSS为子元素设置蓝紫红循环背景色

我有一个父div，里面包含数量不固定的子div，希望为子div按顺序设置背景色：第1个为蓝色，第2个为紫色，第3个为红色，后续子元素重复蓝、紫、红的循环样式。我想用CSS的:nth-child()选择器实现，但不知道怎么让样式循环生效。

简化HTML示例 #

<div class="parent">
    Parent with 10 children

    <!-- IN REALITY, THESE WILL BE CREATED FROM AN ARRAY -->
    <div class="child">ONE</div>
    <div class="child">TWO</div>
    <div class="child">THREE</div>
    <div class="child">FOUR</div>
    <div class="child">FIVE</div>
    <div class="child">SIX</div>
    <div class="child">SEVEN</div>
    <div class="child">EIGHT</div>
    <div class="child">NINE</div>
    <div class="child">TEN</div>
</div>

当前CSS（仅前3个子元素生效） #

.child {
  background-color: color-mix(
    in srgb,
    var(--child-color, rgb(168, 168, 168)) 10%,
    transparent
  );
  color: var(--child-color, rgb(168, 168, 168));
  border: 1px solid var(--child-color, rgb(168, 168, 168));
}

/* How do I repeat this so that the children will repeat with backgrounds as blue, purple, red? */
.parent .child:nth-child(1) {
  --child-color: oklch(51.01% 0.274 263.83);
}

.parent .child:nth-child(2) {
  --child-color: oklch(47.66% 0.246 305.88);
}

.parent .child:nth-child(3) {
  --child-color: oklch(61.42% 0.238 15.34);
}

解决方案：使用:nth-child()的公式语法 #

:nth-child()支持an+b的公式语法，其中a是循环周期，b是起始位置。这里周期为3，用以下公式匹配循环中的对应元素：

• 3n+1：匹配第1、4、7、10...个元素（循环第一个位置，对应蓝色）
• 3n+2：匹配第2、5、8...个元素（循环第二个位置，对应紫色）
• 3n+3：匹配第3、6、9...个元素（循环第三个位置，对应红色）

修改后的CSS如下：

.child {
  background-color: color-mix(
    in srgb,
    var(--child-color, rgb(168, 168, 168)) 10%,
    transparent
  );
  color: var(--child-color, rgb(168, 168, 168));
  border: 1px solid var(--child-color, rgb(168, 168, 168));
}

/* 循环设置颜色：蓝-紫-红 */
.parent .child:nth-child(3n+1) {
  --child-color: oklch(51.01% 0.274 263.83);
}

.parent .child:nth-child(3n+2) {
  --child-color: oklch(47.66% 0.246 305.88);
}

.parent .child:nth-child(3n+3) {
  --child-color: oklch(61.42% 0.238 15.34);
}

这样无论子元素数量多少，都会按蓝、紫、红的顺序循环应用样式，完全用CSS实现，无需为子元素添加额外类名。

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