CSS嵌套定义类选择器不生效是什么原因？该何时使用？

问题原因 #

你写的嵌套样式不生效，核心是选择器匹配规则和你预期不符，分两种情况说明：

1. 用Sass/Less等CSS预处理器的场景 #

你写的嵌套语法默认会生成后代选择器：

• 你最开始的写法编译后生成的选择器是 .lower-container .lower-full，含义是「匹配所有父元素带有.lower-container类、自身带有.lower-full类的子元素」，而你需要的是「同时带有.lower-container和.lower-full类的同一个元素」，自然匹配不上。
• 你编辑1里的写法编译后生成的选择器是 .lower-container .lower-container.lower-full，含义是「匹配父元素带有.lower-container类、自身同时带有.lower-container和.lower-full类的元素」，和你的实际DOM结构不符，同样匹配失败。

2. 用原生CSS嵌套的场景 #

原生CSS嵌套规则和预处理器逻辑一致，默认也是后代选择器，同样需要特殊标记指代父选择器才能匹配同元素多类的场景。

正确写法 #

不管是用预处理器还是原生CSS嵌套，都需要用&符号指代父级选择器，修改后的代码如下：

.lower-container {
    justify-content: center;
    position: absolute;
    width: 92vw;
    /* 其他基础样式 */

    /* & 直接指代前面的 .lower-container，拼接后生成的选择器就是 .lower-container.lower-full */
    &.lower-full {
      height: 92vh;
      top: 0;
    }

    &.lower-mid {
      height: 46vh;
      top: 46vh;
    }

    &.lower-closed {
      height: 1vh;
      top: 91vh;
    }
}

修改后编译/解析出来的选择器就是你需要的同元素多类选择器，JS给.lower-container元素加.lower-full类后就可以匹配到对应样式。

CSS类嵌套的适用场景 #

• 同元素的状态/修饰类定义：比如基础按钮类.btn嵌套定义&.primary、&.disabled等修饰样式，所有和按钮相关的样式都放在同一个代码块里，结构更清晰。
• 子元素样式定义：比如卡片容器.card嵌套定义.title、.content等子元素样式，不用重复写.card前缀，编译后自动生成.card .title这类后代选择器，符合DOM层级结构。
• 伪类、伪元素定义：比如嵌套写&:hover、&::before，不用重复写父选择器，代码更简洁。

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