css - 反复使用不同背景颜色的元素

Question

是否可以在 CSS 上让每个元素重复使用不同的颜色？例如，它有 20 个元素，每个元素有 5 种不同的 bgcolors。

html 喜欢

<div class="item"> ... item 1 .. </div> 
<div class="item"> ... item 2 .. </div> 
<div class="item"> ... item 3 .. </div> 
...
<div class="item"> ... item 20 .. </div>

正如我在 CSS 中所知道的那样

.item:nth-child(1){
  background-color: red;
}
.item:nth-child(2){
  background-color: blue;
}
.item:nth-child(3){
  background-color: yellow;
}
...
.item:nth-child(5){
  background-color: green;
}

正如我所知，为了让它工作，我将对每个 .item:nth-child(n) 进行编码并分配不同的颜色 - 这是静态的。

动态可以吗？我不能再编码 20 of .item:nth-child(n) 只是分配颜色？相反，CSS 会为每 5 个元素分配不同的颜色？就像颜色 1 是红色，2 是蓝色，3 是黄色，4 是紫色，5 是绿色 - 然后重复，第 6 项再次是红色，依此类推。直到 20 变成绿色。最冲突的是，我们不能将另一个类添加到 div 它只是 item 类。这个理论可能吗？

Answer 1

你可以这样做:

.item:nth-child(5n + 1) {
  background-color: red;
}

.item:nth-child(5n + 2) {
  background-color: blue;
}

.item:nth-child(5n + 3) {
  background-color: yellow;
}

.item:nth-child(5n + 4) {
  background-color: violet;
}

.item:nth-child(5n + 5) {
  background-color: green;
}

<div class="item"> ... item 1 .. </div> 
<div class="item"> ... item 2 .. </div> 
<div class="item"> ... item 3 .. </div>
<div class="item"> ... item 4 .. </div> 
<div class="item"> ... item 5 .. </div> 
<div class="item"> ... item 6 .. </div> 
<div class="item"> ... item 7 .. </div> 
<div class="item"> ... item 8 .. </div> 
<div class="item"> ... item 9 .. </div> 
<div class="item"> ... item 10 .. </div> 
<div class="item"> ... item 11 .. </div> 
<div class="item"> ... item 12 .. </div> 
<div class="item"> ... item 13 .. </div> 
<div class="item"> ... item 14 .. </div> 
<div class="item"> ... item 15 .. </div> 
<div class="item"> ... item 16 .. </div> 
<div class="item"> ... item 17 .. </div> 
<div class="item"> ... item 18 .. </div> 
<div class="item"> ... item 19 .. </div> 
<div class="item"> ... item 20 .. </div>

要点是在你希望模式重复多少个div之后定义，这是第一个数字或5n，然后你设置它们的出现顺序用数字 +1 到 +5。