为何CSS嵌套在伪选择器内的追加嵌套选择器不生效？SCSS却正常

现象说明 #

• 用原生CSS时，带.regular类的div文字能变红，但带.pseudo类的div的:before伪元素文字没反应
• 换成SCSS预处理器后，两个元素的文字都会变成红色

用到的代码 #

CSS/SCSS代码

.regular {
  html & {
    color: red;
  }
}

.pseudo:before {
  content: '(pseudo) style me red';

  html & {
    color: red;
  }
}

HTML代码

<div class="regular">(regular) style me red</div>

<div class="pseudo"></div>

为什么会有这种差异？ #

核心在于原生CSS和SCSS对&这个符号的处理逻辑完全不一样：

1. SCSS的处理方式 #

SCSS是预处理器，会在编译成原生CSS的时候直接做字符串替换：

• 对于.regular里的html &，它会把&直接换成父选择器.regular，最终生成合法的CSS：html .regular { color: red; }，浏览器能正常识别。
• 对于.pseudo:before里的html &，它同样把&换成完整的父选择器.pseudo:before，生成html .pseudo:before { color: red; }，这也是合法的选择器，伪元素的样式自然生效。

2. 原生CSS的处理方式 #

原生CSS虽然现在支持嵌套选择器，但它对&的理解是当前匹配的元素（包括伪元素）本身，不是简单的字符串替换：

• 对于.regular里的html &，原生CSS会理解成“匹配.regular元素，且这个元素是html的后代”，等价于html .regular，所以样式能生效。
• 但对于.pseudo:before里的html &，这里的&指的是:before伪元素本身。而伪元素是依附在.pseudo元素上的，原生CSS不允许通过&把伪元素的选择器和html层级拼接——因为伪元素根本不是html的直接后代，这种写法在原生CSS里是无效的，浏览器识别不了，所以样式没效果。

说白了，SCSS不管语义，直接拼出合法选择器；原生CSS讲逻辑，这种跨层级的伪元素嵌套写法不符合它的规则。

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