css-根据父母数量的均等选择每个元素CSS或更少，但不包含JS

编程问答 2022-06-03

问题描述

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

因此，我正在处理一个样式表，其中有两个自定义元素（<grid>和<Box>）是flexBox，并在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 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>

不是同一回事。

解决方法

除非我错过了显而易见的事情，否则类似以下的简单事情应该可以达到相同的目的：

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或odd-ness并从那里导出规则。

css-selectorsflexboxflexboxhtmlless