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

Question

• 想象一系列重复元素。在下面的示例中 .Block
• 想象一个预定义的颜色列表红色、蓝色、绿色、橙色、紫色

问题

如何为每个 .Block 分配唯一的背景颜色，但需要注意以下事项:

• 容器中的 block 数量是动态的，因此可以包含任意数量。
• 如果 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

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

.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;
}

这通过定位每隔一个元素，然后每隔三个元素等来工作。这意味着无论容器中有多少“ block ”，序列都会循环。

这里的工作演示:

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

.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;
}

<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 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>

对此的浏览器支持是 IE9+，但是如果您需要针对较旧的浏览器，则可以使用 Polyfill。这里有一些关于 nth-child 如何工作的更有用的信息:http://css-tricks.com/how-nth-child-works/