原生CSS嵌套无法通过渐进增强兼容旧浏览器，必须用postcss-nesting v10+预处理转为扁平选择器；该插件需单独安装、显式配置、置于autoprefixer等插件之前，且不可与postcss-nested共存。
不能靠“渐进增强”让老旧浏览器理解 @nest 或 & —— 它们会静默忽略整条规则，不解析、不降级、不报错。真正可行的路径只有一条：构建时用 postcss-nesting v10+ 预处理，把嵌套结构转成扁平选择器。
为什么“渐进增强”对原生嵌套完全失效
原生 CSS 嵌套不是可选特性，而是语法层硬门槛：Chrome ≤118、Safari ≤17.3、Firefox 全版本（含实验开启后）遇到 @nest 或非法 & 位置，直接跳过整个规则块。DevTools 的 Styles 面板里根本看不到它，也不触发任何警告。你写的 .card { @nest & h2 { color: red; } } 在旧浏览器中等于没写。
这不是样式未生效，是规则被丢弃 —— 所以所谓“增强”，前提是基础层存在；而这里连基础层都不存在。
必须用 postcss-nesting v10+，且不能和 postcss-nested 共存
postcss-nesting 是唯一对齐浏览器原生语义的插件，v10+ 才支持 @nest & 的严格解析；postcss-nested（少个 -ing）是已归档的 Sass 风格模拟器，二者 AST 处理逻辑冲突，同时启用会导致 TypeError: Cannot read property 'type' of undefined 或静默失效。
立即学习“前端免费学习笔记（深入）”；
- 运行
npm list postcss-nesting，确认输出是└── postcss-nesting@10.x或更高 - 若曾装过
postcss-nested，先执行npm uninstall postcss-nested - Vite 用户需在
vite.config.ts中显式写入require('postcss-nesting')，不能依赖自动发现
postcss-nesting 必须放在 autoprefixer 等插件之前
它需要看到原始的 @nest 结构才能工作。如果 autoprefixer、tailwindcss 或 postcss-preset-env 先运行，嵌套语法可能已被重写或剥离，postcss-nesting 就收不到输入，最终产物里仍残留 @nest —— 导致旧浏览器直接丢弃样式。
- Webpack：
postcss-loader必须排在css-loader之前 - PostCSS 配置中，
postcss-nesting要置于plugins数组最前面 - Tailwind 用户注意：
tailwindcss/nesting是内置插件，但仅 v3.3+ 提供，且必须写在tailwindcss配置项之前
上线前必须验证构建产物，而非源码
很多“样式不生效”问题，根源是构建流程漏掉了预处理环节。打开 dist/ 下的真实 CSS 文件，搜索 @nest —— 如果还存在，说明插件没跑；如果全是扁平选择器（如 .card h2、.btn:hover），才代表成功。
特别注意 Safari 17.3 的 &:hover 静默失效缺陷：本地 Chrome 测通过，不代表 iOS 用户能看到；Firefox 用户哪怕只占 5%，也得提供传统双写规则兜底，比如同时保留 .card h2 和嵌套写法，别指望浏览器自动 fallback。
