如何根据子元素数量设置样式？双列flex-basis全选样式问题

需求：当.group下恰好有两个.column子元素时，为这两个子元素都设置flex-basis样式。

对应的HTML结构：

<div class="group">
 <div class="column"></div>
 <div class="column"></div>
</div>

尝试过的CSS代码：

.group:first-child:nth-last-child(2) ~ .column{
    flex-basis: calc(50% - 30px);
    background: red;
}

问题：上述代码仅能为其中一个.column设置样式，如何调整让所有.column生效？

你之前的选择器只生效一个元素的原因是：.group:first-child:nth-last-child(2)选中的是.group下第一个同时也是倒数第二个的子元素（也就是第一个.column），而~ .column只能选中这个元素之后的同级.column，所以只有第二个.column会被选中。

要让所有.column都生效，有两种可行方案：

方案1：使用CSS :has() 选择器（现代浏览器支持） #

通过:has()判断.group下是否存在符合条件的子元素，然后直接选中所有.column：

.group:has(.column:first-child:nth-last-child(2)) .column {
    flex-basis: calc(50% - 30px);
    background: red;
}

:has(.column:first-child:nth-last-child(2))的作用是：选中包含“第一个子元素是.column且该元素是倒数第二个子元素”的.group容器，也就是恰好有两个.column的情况，之后直接选中容器内所有.column即可。

方案2：兼容旧浏览器的写法 #

如果需要兼容不支持:has()的浏览器，可以直接选中所有符合条件的.column：

.group > .column:first-child:nth-last-child(2),
.group > .column:first-child:nth-last-child(2) ~ .column {
    flex-basis: calc(50% - 30px);
    background: red;
}

这个选择器的逻辑是：

• 第一部分选中第一个.column（且它是倒数第二个子元素，说明总共有两个子元素）
• 第二部分选中第一个.column之后的所有同级.column
  两者结合就覆盖了所有.column元素。

内容的提问来源于stack exchange，提问作者Max