低版本浏览器不支持 CSS 原生嵌套，因其依赖渲染引擎对 @nest 和 & 语法的原生解析能力，Chrome 119+、Safari 17.4+、Edge 119+ 才稳定实现，Firefox 截至 2026 年 6 月仍需手动开启且不可依赖。
低版本浏览器不支持 CSS 原生嵌套，是因为它依赖浏览器渲染引擎对 @nest 和 & 语法的原生解析能力——这属于 CSS 规范新增的运行时特性，不是靠 polyfill 或 JS 模拟就能补上的。Chrome 119+、Safari 17.4+、Edge 119+ 才稳定实现；Firefox 截至 2026 年 6 月仍需手动开启 layout.css.nesting.enabled，且生产环境不可依赖。
为什么 postcss-nesting 不能“编译出兼容代码”
postcss-nesting 插件只处理 Sass 风格的隐式嵌套（如 &:hover、& .title），它把 & 当作字符串占位符做简单拼接，不解析、不转换、也不降级任何 @nest 语法。
- 你写了
@nest & > li { }，它原样透传，不展开、不报错、也不 fallback - 你写了
.card { h2 { color: red; } }（无&），它直接忽略，因为这不是它设计支持的写法 - 它和
postcss-nestedAST 处理逻辑冲突，同时启用会触发TypeError: Cannot read property 'type' of undefined
真正能转译“无 &”嵌套写法的只有 postcss-nested
如果你坚持用缩进式嵌套（比如 .card { h2 { color: red; } }），必须用已归档但仍在广泛使用的 postcss-nested（注意拼写，不是 postcss-nesting）。
- 它会在构建时把
.card { h2 { color: red; } }展开为.card h2 { color: red; } - 它不支持
@nest，也不校验&位置，只做纯字符串上下文拼接 - Webpack 用户需确保
postcss-loader在less-loader之后执行，否则.less文件经less-loader编译后，再进postcss-nested可能因 AST 已失真而失效
Chrome 119+ 本地能跑 ≠ 线上用户能看
即使你启用了 postcss-nesting 并在 Chrome 119+ 里验证通过，仍可能在线上翻车：
立即学习“前端免费学习笔记（深入）”；
- Safari 17.3 存在
&:hover静默失效缺陷：样式规则被跳过，DevTools Styles 面板里完全不显示，也不报错 - Firefox 用户看到的是空白规则块，所有含
&或@nest的规则被静默丢弃 - Vite ≥ 4.5 默认支持，但若自定义了 PostCSS 配置，可能误删
@nest块；Webpack 用户要确认css-loader ≥ 6.8且importLoaders没禁用嵌套解析
真正容易被忽略的，是 Safari 17.3 的 &:hover 缺陷和 Firefox 的零支持——它们不会报错，只会让样式彻底消失。上线前必须用真实设备或 BrowserStack 跑 iOS Safari 和 Firefox 流量占比最高的版本验证，不能只信本地 Chrome。
