Question

我需要为多个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（第一个）颜色。 / p>

Answer 1

您可以使用：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 -->

Answer 2

您可以使用多个类。

泛型类将共享常用样式，每个样式也可以有自己的背景颜色类。

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

.genericClass{
    padding: 5px;
    font-family: Arial;
    font-size: 12px;
}

.bg1{
  background-color: #000; //this should be the first
}

.bg2{
  background-color: #FFF; //this should be the second
}

.bg3{
  background-color: #B1B; //this should be the third
}

.bg4{
  background-color: #DDD; //this should be the fourth
}

http://codepen.io/anon/pen/rxVxXd

CSS - 以前设置的倍数div和不同颜色的相同类

2 个答案: