CSS是否支持选择器嵌套写法以简化重复父选择器代码？

你想要的这种嵌套写法完全可以实现，目前有两种成熟的落地方式：

• 原生CSS嵌套（推荐现代浏览器环境使用）
  现在所有主流现代浏览器（2023年之后发布的Chrome、Edge、Firefox、Safari正式版本）都已原生支持CSS嵌套语法，你只需要用&符号指代当前规则块的父选择器，就可以避免重复书写长长的选择器前缀，写法如下：

  .a .aa .aa1 {
    /* 此处可书写所有.aa1元素共用的基础样式 */
    &:first-child {
      /* 最终解析效果等价于 .a .aa .aa1:first-child */
      styling1: value1;
    }
    &:nth-child(2) {
      styling2: value2;
    }
    &:nth-child(3) {
      styling3: value3;
    }
    &:nth-child(4) {
      styling4: value4;
    }
    &:nth-child(5) {
      styling5: value5;
    }
  }
  

  最新版的嵌套规范已经支持省略&直接写:first-child这类伪类嵌套，也就是你示例里的写法，但为了兼容稍早一些的支持版本，实际开发中更推荐带上&，避免样式失效。
• CSS预处理器（兼容全浏览器场景使用）
  如果你需要兼容老旧浏览器，直接用Sass（SCSS语法）、Less这类成熟的CSS预处理器即可，这类工具从十几年前就支持&指代父选择器的嵌套写法，语法和上面的原生CSS嵌套完全一致，写完后预处理器会编译成你最开始写的那种平铺的普通CSS代码，可以在所有浏览器环境正常运行。

注意嵌套规则：如果嵌套的选择器不带&，比如在块内写.child，最终解析的选择器是.a .aa .aa1 .child，匹配的是aa1内部的子元素；只有带&的写法，才会把伪类、其他选择器直接拼接在父选择器的末尾，匹配aa1元素本身的状态。

这种写法不管你有多少个aa1元素需要单独设置样式，都只需要写一次父选择器链，能大幅降低代码冗余，后续修改父选择器的时候也只需要改一处，维护成本低很多。

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