css - 根据父母数量的奇偶性选择每个元素（CSS或Less但没有JS）

Question

[我知道我可能没有很好地解释标题中的问题。 ]

所以，我正在处理一个样式表，其中有两个自定义元素（<grid> 和 <box>）是弹性框，并在 flex-direction 中交替出现，例如：

<box>             <!-- flex-direction: column -->
  <grid>           <!-- flex-direction: row -->
    <box></box>     <!-- flex-direction: column -->
    <box></box>     <!-- flex-direction: column -->
  </grid>
  <box>            <!-- flex-direction: row -->
    <grid></grid>   <!-- flex-direction: column -->
  </box>
</box>

在较少的情况下，我最好的解决方案是：

grid, box { display: flex }
body {
 > grid, > box {
   flex-direction: column;
 > grid, > box {
   flex-direction: row;
 > grid, > box {
   flex-direction: column;
   // Etc...
 }}}
}

这很糟糕，css中是否有类似下面的代码？

grid, box { display: flex }
body > grid:parents(even), body > box:parents(even) { flex-direction: column }
body > grid:parents( odd), body > box:parents( odd) { flex-direction: row }

编辑：body > nth-child() 不起作用。

代码：

body > grid:nth-child(even),
body > box:nth-child(even) {
  flex-direction: column;
}

body > grid:nth-child(odd),
body > box:nth-child(odd) {
  flex-direction: row;

1. body > element:nth-child(odd)只选择body的第一个直接子节点，应该是body element:nth-child(odd)。

2. 我在问题开头的 HTML 示例在修改以解决问题 1 时使用上面的代码如下所示。

<box>             <!-- flex-direction: column -->
  <grid>           <!-- flex-direction: row -->
    <box></box>     <!-- flex-direction: column -->
    <box></box>     <!-- flex-direction: row -->
  </grid>
  <box>            <!-- flex-direction: column -->
    <grid></grid>   <!-- flex-direction: row -->
  </box>
</box>

这不是一回事。

Answer 1

除非我遗漏了一些明显的东西，否则像这样简单的东西应该可以达到同样的效果：

grid,
box {
  display: flex
}

body > grid:nth-child(even),
body > box:nth-child(even) {
  flex-direction: column;
}

body > grid:nth-child(odd),
body > box:nth-child(odd) {
  flex-direction: row;

}

您可以使用nth-child 来确定父元素的even-ness 或odd-ness 并从中派生规则。