如何以重复模式为儿童应用背景颜色（蓝色，紫色，红色）[重复]

Question

我可以使用CSS执行此操作？ 我想使用：nth-child（），但我不确定如何应用以使其重复。

HERHE是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个孩子Divs：

.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);
}

上面的代码仅适用于前三个divs。我不确定如何与CSS保持模式。我真的希望为此使用CSS。 我想我可以根据循环中的索引将不同的班级应用于孩子，但我宁愿使用css.

我有一个stackblitz为此做了：

https：//stackblitz.com/edit/stackblitz-starters-istbgzs4？file = src％2fglobal_styles.csssis

您需要在

n

：中使用:nth-child

乘数

Answer 1

.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(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) {
  --child-color: oklch(61.42% 0.238 15.34);
}

<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>