偶数和奇数级别子级的选择器

选择偶数和奇数级别子级的正确选择器是什么？

我想简化当前的 CSS，同时允许无限级别，而无需手动为它们编写 CSS。

.box {
    max-width:100%;margin:25px 0px;padding: 15px;
    border:#d1ddbd solid  2px;
    background-color:#f3fae8;
}

.box > .box {
    border:#d1ddbd solid  1px;
    background-color:#fff;
}

.box > .box > .box {
    border:#d1ddbd solid  1px;
    background-color:#f3fae8;
}

.box > .box > .box > .box {
    border:#d1ddbd solid  1px;
    background-color:#fff;
}

在 CSS 中没有办法做到这一点，除了坐下来编写规则。编写十个规则并降低到十个嵌套级别并不是什么大不了的事。你的选择是花更多的时间编写 JS 来添加类，或者让你的后端添加类，或者与 SASS 宏进行斗争，其中任何一个都会花费比这更值得的时间。

.box {
  max-width: 100%;
  margin:    25px 0px;
  padding:   15px;
  border:    #d1ddbd solid 2px;
}

.box > .box {
  border-width: 1px;
}

.box,
.box > .box > .box, 
.box > .box > .box > .box > .box, 
.box > .box > .box > .box > .box > .box > .box,
.box > .box > .box > .box > .box > .box > .box > .box > .box {
    background-color:#f3fae8;
}

.box > .box, 
.box > .box > .box > .box, 
.box > .box > .box > .box > .box > .box,
.box > .box > .box > .box > .box > .box > .box > .box,
.box > .box > .box > .box > .box > .box > .box > .box, .box > .box {
    background-color:#fff;
}