用于嵌套 DIV 的类似 Zebra 的 CSS 样式答案

【问题标题】：Zebra-like css styling for nested DIVs用于嵌套 DIV 的类似 Zebra 的 CSS 样式
【发布时间】：2012-01-13 01:11:41
【问题描述】：

我有嵌套的 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）重新排列

【问题讨论】：

不是解决方案，但您可以通过将元素分组来简化上述 css：div, div div div, div div div div div { ... } 和 div div, div div div div { ... }。
对于实际的解决方案，我只使用 javascript 和偶数/奇数类，因为无论如何您都在使用 javascript 进行拖放。
我可能会同意。谢谢大家。

标签： javascript html css css-selectors

【解决方案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>

【讨论】：

是的，我考虑过，但元素也需要由用户重新排列。我已经编辑了我的问题。谢谢你的回答。