Question

想象一系列重复元素。在下面的示例.Block
想象一下预定义的颜色列表red, blue, geen, orange, purple

问题

如何为每个.Block分配一个独特的背景颜色，并注意以下几点：

容器中的块数是动态的，因此可以包含任何数字。
如果块数超过预定义颜色数，则应重复颜色序列。

注意： 我正在尝试在css中进行此操作，但如果需要，将使用javascript，jquery。

.Block{
  display:block;
  height:50px;
  width:100%;
  background:red;
}

<div class="Wrap">
  <div class="Block">RED</div>
  <div class="Block">BLUE</div>
  <div class="Block">GREEN</div>
  <div class="Block">ORANGE</div>
  <div class="Block">PURPLE</div>
</div>

Answer 1

您可以使用nth-child选择器在CSS3中执行此操作。第n个子选择器接受简单的表达式，您可以使用它们来定位序列中的某些元素。

.Block{
  display:block;
  height:50px;
  width:100%;
  background:red;
}

.Block:nth-child(5n + 1){
    background-color: red;
}
.Block:nth-child(5n + 2){
    background-color: blue;
}
.Block:nth-child(5n + 3){
    background-color: green;
}
.Block:nth-child(5n + 4){
    background-color: orange;
}
.Block:nth-child(5n + 5){
    background-color: purple;
}

这可以通过定位每个第二个元素，然后是每个第三个元素等，这意味着无论您在容器中有多少个“块”，序列都会循环。

此处的演示演示：http://jsfiddle.net/7vjh1vx9/

浏览器支持IE9 +，但是如果您需要定位旧浏览器，则存在polyfill。有关nth-child如何在这里工作的更多有用信息：http://css-tricks.com/how-nth-child-works/

Answer 2

如果一次添加内容，您可以这样做（或每次更改内容时运行脚本）：

 function styleBlock() {
    var colors = ["red","blue","yellow"],
        counter = 0;    
    $(".Wrap .Block").each(function(){   
        $(this).css("background-color",colors[counter ]);
        counter = counter % colors.length;
        counter += 1;
    });
}

$(".Wrap").append('<div class="Block">DYNAMICALLY ADDED</div>');
styleBlock();

jsfiddle

我现在正在做一些研究，看看它是否只能用CSS来做。

将预定义的颜色序列应用于动态元素列表

2 个答案: