为什么低版本浏览器不支持CSS原生嵌套Nesting，如何编译兼容？-css教程-PHP中文网

低版本浏览器不支持 css 原生嵌套，因其依赖渲染引擎对 @nest 和 & 语法的原生解析能力，chrome 119+、safari 17.4+、edge 119+ 才稳定实现，firefox 截至 2026 年 6 月仍需手动开启且不可依赖。

为什么低版本浏览器不支持css原生嵌套nesting，如何编译兼容？

低版本浏览器不支持 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-nested AST 处理逻辑冲突，同时启用会触发 TypeError: Cannot read property 'type' of undefined

真正能转译“无 &”嵌套写法的只有 postcss-nested

如果你坚持用缩进式嵌套（比如 .card { h2 { color: red; } }），必须用已归档但仍在广泛使用的 postcss-nested（注意拼写，不是 postcss-nesting）。

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

它会在构建时把 .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。