css - 偶数级和奇数级子级的选择器

Question

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

我想简化我当前的 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;
}

Answer 1

在 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;
}