代码之家 › 专栏 › 技术社区 › ineedtoknow

如何以重复模式(蓝色、紫色、红色)为儿童应用背景色[重复]

sass css

ineedtoknow · 技术社区 · 6 月前

我有一个父div,有不同数量的子div。子div将始终位于父div内。
我想按顺序给孩子的div着色,这样第一个孩子是蓝色的,第二个是紫色的,第三个是红色的,并为其他孩子重复蓝色、紫色、红色。

如何使用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>

以下是仅适用于前3个子div的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));
}

/* 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);
}

上述代码仅对前三个div应用颜色。我不确定如何使用CSS来保持模式。我真的很想用CSS来实现这一点。我想我可以根据循环中的索引为孩子们应用不同的类,但我宁愿使用CSS。

我为此做了一个stackblights: https://stackblitz.com/edit/stackblitz-starters-istbgzs4?file=src%2Fglobal_styles.css

1 回复 | 直到 6 月前

Kosh 6 月前

你需要使用 n 乘数在 :nth-child :

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