重复第 n 个子值 [重复]

Question

是否可以使用 nth-child 重复一系列颜色？

在下面的示例中，如果我想从 4-8 添加相同的重复颜色，我现在已经为 nth-children 1-4 设置了各种颜色，我可以仅使用 css 来执行此操作，还是需要使用 javascript？

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px;
}

.box {
  border: 1px solid black;
  height: 100px;
}

.box:nth-child(1) {
  background: red;
}

.box:nth-child(2) {
  background: blue;
}

.box:nth-child(3) {
  background: yellow;
}

.box:nth-child(4) {
  background: pink;
}

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

所以最终输出应该有两行相同的 4 种颜色

任何帮助或提示将不胜感激！

JAVASCRIPT

现在我知道我可以在循环中创建元素并动态分配一个类，但我想知道是否有非 js 解决方案

Answer 1

您可以使用.box:nth-child(4n+x) 作为您的选择器。这个answer解释的很好。

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px;
}

.box {
  border: 1px solid black;
  height: 100px;
}

.box:nth-child(4n+1) {
  background: red;
}

.box:nth-child(4n+2) {
  background: blue;
}

.box:nth-child(4n+3) {
  background: yellow;
}

.box:nth-child(4n+4) {
  background: pink;
}

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Answer 2

这是解决方案。而不是常数值使用 n 参数来做到这一点。

这里 (4n+1) 表示样式从第一个孩子开始并重复 它适用于 4 的倍数的孩子。 (4n+2) 表示样式 从第 2 个孩子开始，并为第 2 个孩子重复 4的倍数。

希望对你有所帮助。

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px;
}

.box {
  border: 1px solid black;
  height: 100px;
}

.box:nth-child(4n+1) {
  background: red;
}

.box:nth-child(4n+2) {
  background: blue;
}

.box:nth-child(4n+3) {
  background: yellow;
}

.box:nth-child(4n+4) {
  background: pink;
}

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>