原生CSS嵌套在2026年仍属高风险高回报：Chrome 119+、Edge 119+、Safari 17.4+稳定支持；Firefox不支持，含&或@nest的规则被静默忽略；符号位置、空格、拼写极敏感，&必须紧贴开头，@nest用于复杂选择器，上线前须验证真实用户浏览器覆盖、构建流程及降级方案。
原生 CSS nesting 不是“写完就能上线”的语法糖，它在 2026 年仍处于「高风险高回报」阶段：Chrome 119+、Edge 119+、Safari 17.4+ 稳定支持；Firefox 全面不支持，且所有含 & 或 @nest 的规则会被静默跳过——DevTools 里根本看不到，也不报错。
为什么直接把 SCSS 嵌套搬进 .css 文件会失效
很多开发者把预处理器习惯直接平移，结果样式消失。根本原因在于原生嵌套对符号位置、空格、拼写极其敏感，而预处理器（如 Sass）对此宽容得多。
-
&必须出现在嵌套规则开头，紧贴后续选择器，中间不能有空格：&:hover✅，& :hover❌（变成后代选择器） -
&.modifier✅，但.modifier &❌（&不在开头，整条规则被丢弃） -
&::before✅，& ::before❌（多一个空格，匹配范围扩大为.parent ::before） - 拼错
@nest为@nestt或混入@media，整块嵌套直接被忽略
哪些场景必须用 @nest 而不是 &
& 只能表达「当前父选择器 + 后续片段」的线性关系，遇到兄弟、父子、BEM 修饰符组合等复杂逻辑时，它无能为力——这时 @nest 是唯一合法出口，但它有硬约束。
- BEM 修饰符：
@nest &.is-disabled { opacity: 0.5; }✅；&.is-disabled❌（编译成.btn.btn.is-disabled，类名重复） - 相邻兄弟：
@nest & + .tooltip✅；& + .tooltip❌（缺少左侧完整上下文，无效） - 子元素 + 伪类组合：
@nest & > button:hover✅；& > button:hover❌（&后不能直接跟伪类，必须用@nest包裹完整选择器） -
@nest不能嵌套在另一个&块内：& { @nest & span { } }❌（直接失效）
上线前必须验证的三件事，缺一不可
原生嵌套没有降级机制，也没有 fallback 提示。你在本地 Chrome 看着正常，用户看到的可能是白屏或错乱布局。
立即学习“前端免费学习笔记（深入）”；
- 查真实用户覆盖的浏览器版本：iOS Safari 17.3 对
&:hover有已知缺陷，&::before可能正常但&:hover静默失效；Safari 17.4 才修复 - 确认构建流程是否启用
postcss-nesting：Vite/Webpack 默认不开启，压缩或转译阶段可能把&当普通字符处理，导致线上样式丢失 - Firefox 用户哪怕只占 5%，也得兜底：要么双写规则（
.card { } .card h2 { }），要么用 PostCSS 插件统一编译，别指望浏览器自动兼容
真正容易被忽略的，是 Safari 17.4 的发布时间（2026 年 6 月 15 日）——这意味着你线上用户中仍有相当比例运行着 17.3 或更早版本，而他们的 &:hover 会无声失效。这不是配置问题，是引擎级 bug，只能靠检测 + 降级规避。
