html - CSS-多个div相同的类，以前设置的颜色不同

This question already has answers here:

How can I get a specific number child using CSS?
                                
                                    （2个答案）
                                
                        
                                4年前关闭。
            
                    
我需要为多个div设置一个类，并且每个每个div具有不同的背景颜色。

<div class="genericClass">Some Text</div> <!-- This should be #000 -->
<div class="genericClass">Some Text</div> <!-- This should be #FFF -->
<div class="genericClass">Some Text</div> <!-- This should be #B1B -->
<div class="genericClass">Some Text</div> <!-- This should be #DDD -->

.genericClass{
     background-color: #000; /* this should be the first */
     background-color: #FFF; /* this should be the second */
     background-color: #B1B; /* this should be the third */
     background-color: #DDD; /* this should be the fourth */
}

但是我不知道该怎么做。

编辑：我没有机会知道可以添加多少个项目，因此，模式应在四个div之后重复，因此，它有五个div，最后一个应该采用＃000（第一个）颜色。

最佳答案

您可以使用：nth-​​of-type（n）选择器来选择特定顺序/位置的元素

要使颜色重复，可以使用以下语法：4n + x其中4是循环大小，因此此序列每4个元素重复一次，x是偏移量+ 1以第一个元素为目标+ 2以第二个元素为依此类推。

进一步参考：w3schools.com :nth-child() Selector

.genericClass:nth-of-type(4n + 1) {
  background-color: #000; //this should be the first
}
.genericClass:nth-of-type(4n + 2) {
  background-color:#FFF; //this should be the second
}
.genericClass:nth-of-type(4n + 3) {
  background-color: #B1B; //this should be the third
}
.genericClass:nth-of-type(4n + 4) {
  background-color: #DDD; //this should be the fourth
}

<div class="genericClass">Some Text</div>
<!-- This should be #000 -->
<div class="genericClass">Some Text</div>
<!-- This should be #FFF -->
<div class="genericClass">Some Text</div>
<!-- This should be #B1B -->
<div class="genericClass">Some Text</div>
<!-- This should be #DDD -->
<div class="genericClass">Some Text</div>
<!-- This should be #000 -->
<div class="genericClass">Some Text</div>
<!-- This should be #FFF -->
<div class="genericClass">Some Text</div>
<!-- This should be #B1B -->
<div class="genericClass">Some Text</div>
<!-- This should be #DDD -->
<div class="genericClass">Some Text</div>
<!-- This should be #000 -->
<div class="genericClass">Some Text</div>
<!-- This should be #FFF -->
<div class="genericClass">Some Text</div>
<!-- This should be #B1B -->
<div class="genericClass">Some Text</div>
<!-- This should be #DDD -->
<div class="genericClass">Some Text</div>
<!-- This should be #000 -->
<div class="genericClass">Some Text</div>
<!-- This should be #FFF -->
<div class="genericClass">Some Text</div>
<!-- This should be #B1B -->
<div class="genericClass">Some Text</div>
<!-- This should be #DDD -->
<div class="genericClass">Some Text</div>
<!-- This should be #000 -->
<div class="genericClass">Some Text</div>
<!-- This should be #FFF -->
<div class="genericClass">Some Text</div>
<!-- This should be #B1B -->
<div class="genericClass">Some Text</div>
<!-- This should be #DDD -->
<div class="genericClass">Some Text</div>
<!-- This should be #000 -->
<div class="genericClass">Some Text</div>
<!-- This should be #FFF -->
<div class="genericClass">Some Text</div>
<!-- This should be #B1B -->
<div class="genericClass">Some Text</div>
<!-- This should be #DDD -->

关于html - CSS-多个div相同的类，以前设置的颜色不同，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34183704/