CSS能不能一次性定义多个DIV的背景颜色？

Question

就像A盒子里面有4个小盒子abcd，CSS有没有像数组那样逐个定义的功能？
例子：
<div class="A">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
</div>
.A{逐个定义里面的背景颜色}

Answer 1

这得看你设定的颜色是否存在规律，如果是杂乱无章的那就只能一个个来设定了。比方说第一个是红色，第二个是黄色，第三个是蓝色，第四个是红色，第五个是黄色，第六个是蓝色……也就是红黄蓝这样循环变化的，可以这样：

<style>
.A div:nth-child(3n+1) {color:red}
.A div:nth-child(3n+2) {color:yellow}
.A div:nth-child(3n+3) {color:blue}
</style>
<div class="A">
<div>111</div>
<div>222</div>
<div>333</div>
<div>444</div>
<div>555</div>
<div>666</div>
<div>777</div>
<div>888</div>
<div>999</div>
</div>

如果想再复杂一些的，那就只能通过js代码来实现了。

Answer 2

css预编译工具可以。sass