如何用CSS选择父元素及3层嵌套子元素？有没有更优写法？

首先明确：原生CSS目前没有你设想的>(3)这种直接指定层级深度的简洁语法，但有几种更简洁的替代写法，以下是具体方案：

1. 原生CSS：使用:is()选择器简化代码 #

:is()可以将多个重复的选择器合并，减少代码冗余，写法如下：

:is(.the-parent,
    .the-parent > div,
    .the-parent > div > div,
    .the-parent > div > div > div) {
    display: flex;
}

或者进一步简化嵌套部分：

.the-parent,
.the-parent > :is(div, div > div, div > div > div) {
    display: flex;
}

这两种写法最终生效的样式和你原来的代码完全一致，但代码更紧凑。

2. CSS预处理器：用循环自动生成选择器（适合层级更多的场景） #

如果你使用Sass、LESS这类预处理器，可以通过循环语法自动生成多层级的选择器，无需手动重复书写：

Sass示例： #

// 定义需要的层级数（父元素+3层子元素，循环3次）
$depth: 3;

.the-parent {
    display: flex;
    $current-selector: &;
    // 循环生成每层直接子元素的选择器
    @for $i from 1 through $depth {
        $current-selector: #{$current-selector} > div;
        #{$current-selector} {
            display: flex;
        }
    }
}

编译后会自动输出你最初写的那组选择器，后续如果需要调整层级，只修改$depth的值即可，非常灵活。

3. 额外说明 #

• 避免使用.the-parent div：这个选择器会选中.the-parent下所有深度的div元素，不符合你只选3层的需求。
• 原生CSS暂无层级计数选择器：你设想的.the-parent >(3) div这种语法目前不在CSS标准中，暂时无法直接使用。

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