SCSS父选择器不生效，编译后CSS选择器层级异常问题求助

编译后选择器层级异常的核心原因是，当前#partThree对应的SCSS规则嵌套在了其他父级选择器内部，最常见的场景是嵌套在了body选择器中。

SCSS的父选择器标识符&指代当前规则的完整父级选择器路径，若你的实际代码结构如下：

body {
  /* 其他全局样式 */
  #partThree{
    display: block;

    .two-parts &{
        display: none;
    }
  }
}

此时&对应的完整路径是body #partThree，.two-parts &编译后就会拼接为.two-parts body #partThree，和你看到的异常输出完全吻合。

可根据需求选择以下两种方案：

• 方案1：调整嵌套层级
  将#partThree的规则移到SCSS文件最外层，不要嵌套在body或其他全局父选择器内。此时&仅代表#partThree，编译后生成.two-parts #partThree，可实现父容器#parts带two-parts类时隐藏#partThree的需求。

• 方案2：精准匹配父容器（更推荐）
  直接在SCSS中明确关联#parts的类状态，既不受外层嵌套规则影响，也能避免其他带two-parts类的元素误触发隐藏逻辑：

#partThree{
    display: block;

    #parts.two-parts &{
        display: none;
    }
}

该写法编译后会直接生成预期的#parts.two-parts #partThree选择器，匹配精度更高。

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