javascript - 嵌套 DIV 的类似斑马的 css 样式

Question

我有嵌套的 DIV 元素，但我不知道嵌套的层次。我需要每个都具有与其父级不同的背景，从而创建类似斑马的颜色。我只使用两种背景——深色和白色。效果需要类似于在容器中设置奇数和偶数子项的样式，但在我的例子中，子项是嵌套的。我可以使用每个嵌套元素的规则来做到这一点，例如:

div  div  div  div {
    background-color: #fff;
}

div  div  div {
    background-color: #aaa;
}

div  div {
    background-color: #fff;
}

div {
    background-color: #aaa;
}

但我正在寻找更优雅的解决方案。这只能用 CSS 来完成吗？我需要 JavaScript 吗？

如有任何建议，我们将不胜感激。

编辑:我正在寻找一种不需要元素具有类的解决方案，因为它们需要通过拖放 (javascript) 重新排列

Answer 1

更新:考虑到问题的更新，此解决方案不再相关。留在这里以供引用。

我只会使用“偶数”和“奇数”类(或类似的东西):

div.even {
    background-color: #fff;
}

div.odd {
    background-color: #aaa;
}

然后在 HTML 中:

<div class="even">
    <div class="odd">
       <div class="even">
           <div class="odd">
               ...
           </div>
       </div>
    </div>
</div>