postcss-nesting 不支持 css nesting 草案的 @nest 语法，仅处理 sass 风格嵌套（如 & h2）；它将 & 视为字符串拼接占位符，不解析 @nest，也不校验其合法性，混用会导致规则失效或被忽略。
PostCSS-nesting 不支持原生 CSS 嵌套语法（@nest），它只处理 Sass 风格的嵌套写法；想用 @nest，得直接靠浏览器原生解析，不能靠这个插件转译。
PostCSS-nesting 本质是 Sass 模拟器，不是草案实现
它把 .card { & h2 { color: red; } } 这类写法展开成 .card h2 { color: red; }，但整个过程完全绕过 @nest 规则。插件源码里没有解析 @nest 的逻辑，也不校验 & 是否在 @nest 内部——它默认所有 & 都合法，且总在最左侧。
-
@nest & h2 { ... }在 PostCSS-nesting 中会被当成普通选择器字面量，不触发嵌套展开，最终原样输出（浏览器不认就失效） - 你写
.card { @nest & h2 { color: red; } }，插件不会报错，但也不会处理它——它只认&开头的子规则，不认@nest包裹结构 - PostCSS-nesting 的目标是“兼容旧项目迁移”，不是“对接 CSS Nesting Level 1 草案”
想用原生 @nest，就得放弃构建时转译
Chrome 119+、Edge 119+、Safari 17.4+ 已稳定支持 @nest，Firefox 仍需手动开启实验标志（about:config → layout.css.nesting.enabled = true）。此时你要：
- 确保 CSS 文件直接交给浏览器解析，不经过
postcss-nested或postcss-nesting - 删掉构建流程中所有对嵌套语法的 PostCSS 处理步骤，否则会把
@nest块当无效内容忽略或破坏结构 - 检查 DevTools 的 Styles 面板：如果看到
@nest规则灰掉或没生效，先确认浏览器版本，再看是否被 loader 误删了
混用 @nest 和 PostCSS-nesting 会出硬冲突
两者对 & 的语义理解完全不同：
- PostCSS-nesting 把
&当作字符串拼接占位符，允许&__title、&:hover、.item &（虽然后者编译结果可能不符合预期） - 原生
@nest要求&必须紧贴选择器开头，.item &直接非法，整条规则被丢弃（DevTools 里连 warning 都不报） - 共存时，PostCSS-nesting 可能提前把
&替换掉，导致后续浏览器收不到合法的@nest & ...结构
真正要“提前体验草案”，只能直连浏览器，别经任何 PostCSS 嵌套插件。而 postcss-nesting 这个名字本身就有误导性——它跟草案无关，只是历史命名遗留。现在还依赖它的项目，得清醒知道：你在用一套已被原生替代、但更宽松也更易失控的模拟方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
