根据元素的位置动态更改背景颜色

Question

我的网页上有三个简单的div

<div class="box">
    DIV A
</div>
<div class="box">
    DIV B
</div>
<div class="box">
    DIV C
</div>

我想知道是否可以（仅使用css）通过设置开始颜色为3（或更多）div（具有相同的类选择器）分配背景颜色，然后不时更改饱和度最后一个。

我现在正在做的是为每个div设置background-color属性，但是这些元素是以dinamically方式生成的，我不知道它们有多少。

我将要达到的图像示例。

设置一些想法

.box{
   background-color:#123456;
}

和

.box:nth-child(n){
   background-color-add:#000001;
}

这样，n - 元素的背景颜色将始终不同于n+1 - 背景。

我的问题是：
有可能吗？
如果是的话？

Answer 1

没有办法只使用css，如果你不想使用sass或更少或者jquery之类的东西，那么先考虑一下你可能有多少最大div并定义颜色对于每个盒子：

.box:nth-child(1){
   background-color:#000001;
}
.box:nth-child(2){
   background-color:#000011;
}
.box:nth-child(3){
   background-color:#000111;
}