嵌套CSS浏览器前缀致Chrome解析异常？是否为Chrome Bug？

CSS嵌套已是主流浏览器原生支持的特性，在以下测试代码中，按钮本该显示红色——这个效果在Firefox中正常，但在Chrome 119.0.6045.106（64位正式版）里却无法生效。只有移除&::-moz-focus-inner { ... }这条规则后，Chrome才能正确渲染出红色按钮。

测试代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>CSS Nesting Test</title>
    <style>
        button {
            &::-moz-focus-inner {
                border-width: 0;
            }

            &:not(:disabled) {
                background-color: red;
            }
        }
    </style>
</head>
<body style="margin:0;padding:50px;">
<button>This Button Should Be Red</button>
</body>
</html>

结论：这确实是Chrome的已知Bug。

原因是Chrome在处理CSS嵌套时，如果遇到它不识别的私有前缀伪元素选择器（比如::-moz-focus-inner是Firefox专属的伪元素），会错误地中断整个父选择器下后续嵌套规则的解析，导致后面的&:not(:disabled)规则完全不被应用。而Firefox既能正确识别自己的私有伪元素，也能正常解析后续的嵌套规则，所以不受影响。

临时修复方案：

• 把Firefox专属的私有规则移到嵌套外部，写成独立的CSS块：

button::-moz-focus-inner {
  border-width: 0;
}

button {
  &:not(:disabled) {
    background-color: red;
  }
}

• 或者用@supports包裹私有规则，仅让Firefox加载这段代码，避免干扰Chrome的嵌套解析：

button {
  @supports (-moz-appearance:none) {
    &::-moz-focus-inner {
      border-width: 0;
    }
  }

  &:not(:disabled) {
    background-color: red;
  }
}

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