原生CSS嵌套在2026年仍需严格校验浏览器支持和语法合法性：Chrome 119+、Edge 119+、Safari 17.4+ 稳定支持，Firefox 全面不支持；& 必须显式出现在规则开头且无空格；@nest 是处理复杂关系的唯一方式但不可嵌套；上线前必须验证真实用户浏览器覆盖、构建流程是否启用 postcss-nesting、Firefox 兜底方案。
原生CSS嵌套不是“写了就能用”，它在2026年仍需严格校验浏览器支持和语法合法性
Chrome 119+、Edge 119+、Safari 17.4+ 才稳定支持；Firefox 全面不支持，所有含 & 或 @nest 的规则会被静默跳过。写错一个符号（比如漏 &、多空格、拼错 @nestt），整条嵌套块就消失——DevTools 的 Styles 面板里根本看不到它，也不会报错。
& 必须显式出现，且位置极其敏感
& 是当前父选择器的占位符，不是缩进符号，也不是可选语法糖。它必须出现在嵌套规则开头，紧贴后续选择器片段，中间不能有空格。
-
&:hover✅ 编译为.btn:hover -
& .active❌ 多了个空格，变成后代选择器.btn .active，语义偏移 -
.active &❌&不在开头，无效，整条规则被丢弃 -
&::before✅ 正确；& ::before❌ 多空格后变成.btn ::before，匹配范围扩大且不可控
@nest 是处理复杂关系的唯一出口，但不能嵌套在 & 块里
当你要表达兄弟、父子、逻辑组合或 BEM 修饰符时，& 不够用，必须用 @nest。但它有硬限制：必须跟完整选择器，不能省略，也不能嵌套在另一个嵌套块内。
- 写 BEM 修饰符：
@nest &.is-active { background: #007bff; }✅；&.is-active❌ 会编译成.card.card.is-active（重复类名） - 跨层级组合：
@nest & > header + section✅；@nest & + section❌ 缺少左侧完整上下文，无效 -
& { @nest & span { } }❌@nest不能出现在&规则内部，直接失效 -
@nestt或@nest &@media❌ 拼错或混入其他 at-rule，整块被忽略
上线前必须验证三件事，缺一不可
原生嵌套没有降级机制，也不提供 fallback。你写的代码在本地 Chrome 能跑，不代表用户看到的是同一份样式。
立即学习“前端免费学习笔记（深入）”；
- 查真实用户覆盖的浏览器版本：iOS Safari 17.3 对
&:hover有兼容缺陷，&::before可能正常但&:hover静默失效 - 确认构建流程是否启用
postcss-nesting：Vite/Webpack 默认不开启，压缩或转译阶段可能把&当普通字符处理，导致线上白屏或样式丢失 - Firefox 用户哪怕只占 5%，也得提供传统写法兜底：要么双写规则（
.card { ... } .card h2 { ... }），要么用 PostCSS 插件统一编译，别指望浏览器自动兼容
真正容易被忽略的，是 Safari 17.3 和 Firefox 的差异表现——它们不报错，但行为不一致，靠肉眼测试很难发现，必须用真实设备或 BrowserStack 实测关键交互状态。
