嵌套元素的交替背景色

Question

我的标记包含相同元素的树形结构，看起来像这样：

valueA|valueB
valueC|valueD
valueE|valueF
valueG|valueH

我想做的是为每个深度替换其背景颜色。我能够通过非常丑陋的CSS来实现这一点，并且想知道是否有更聪明的方法。这是<div class="node"> <div class="node"> <div class="node" /> </div> <div class="node" /> </div> ：

naive solution

Answer 1

使用直接后代选择器

// Parent
.a {
  background: red;
}

// Child
.a > .a {
  background: green;
}

// Grandchild
.a > .a > .a {
  background: red;
}

.a {
  height: 50px;
  padding: 10px;
  width: 100%;
}

.a {
  background: red;
}

.a > .a {
  background: green;
  height: 30px;
  width: 100%;
}

.a > .a > .a {
  background: red;
  height: 10px;
  width: 100%;
}

<div class="a">
  <div class="a">
    <div class="a"></div>
    <div class="a"></div>
</div>