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

任何建议都将不胜感激。

编辑：我正在寻找一种解决方案，它不需要元素有一个类，因为它们需要用drag＆amp ;;重新排列。 drop（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>

嵌套DIV的类似Zebra的css样式

1 个答案: