原生css嵌套在旧浏览器中被静默忽略，无法通过postcss-nesting转译或css.supports()检测降级；必须显式双写扁平规则与@supports(selector(&))嵌套规则，并为firefox单独提供完整兜底样式。
原生 CSS 嵌套（@nest 和 &）在旧浏览器中不会被解析，也不会报错——它直接被忽略，整条规则失效。你不能靠构建工具“转译”它，也不能用 CSS.supports() 检测后动态加载样式。降级必须是显式、静态、可预测的。
为什么 postcss-nesting 不能帮你做降级
postcss-nesting 只处理 Sass 风格的隐式嵌套（比如 &:hover），它不识别、不解析、不转换任何原生嵌套语法：@nest、& 在非开头位置、带空格的 & .active 等，全都被当作文本透传。你写了 @nest &.is-open { }，它原样输出，旧浏览器照样跳过。
- 它不是 polyfill，也不做兼容性判断
- 它不校验
&是否合法（比如.card { .title { } }这种无&的写法，它根本不管） - 它不生成 fallback 规则，也不会把
@nest & > ul展开成.menu > ul
真正有效的降级方式：双写 + @supports 分流
现代浏览器支持嵌套语法，就让它用；不支持的（如 IE、Firefox、Safari ≤17.3），靠提前写好的扁平规则兜底。关键不是“自动转换”，而是“主动提供两套”。
- 把嵌套块和等效扁平规则并列书写，例如：
.card { padding: 1rem; } .card h2 { color: #333; } .card .content { line-height: 1.6; } @supports (selector(&)) { .card { & h2 { color: #333; } & .content { line-height: 1.6; } } } -
@supports (selector(&))是目前最可靠的检测方式（Chrome 119+、Safari 17.4+、Edge 119+ 支持），比@supports (nesting: true)更稳 - 不要把降级规则塞进
@supports not—— IE 等老浏览器根本不认识@supports，整块规则都会被忽略，导致完全无样式 - 确保扁平规则在前，嵌套规则在后，避免层叠覆盖意外
Firefox 用户必须单独兜底
Firefox 至今（2026年9月）仍**完全不支持**原生嵌套，& 和 @nest 会被静默丢弃，DevTools 里也看不到。仅靠 @supports 检测无法覆盖它，因为检测本身在 Firefox 中就返回 false，但你的嵌套样式已经没了。
- 对 Firefox，必须提供完整、独立的扁平样式表，或通过 JS 注入 class：
document.body.classList.add('no-nesting')，再写.no-nesting .card h2 { } - 不能依赖构建时“自动展开”——没有插件能正确还原
@nest & + section或@nest &.active > header这类逻辑，它们必须手写 - 若项目已用 BEM，降级就更简单：直接用
.card__title、.card__content，完全绕过嵌套需求
最容易被忽略的一点：Safari 17.3 对 &:hover 有静默兼容缺陷，&::before 却正常；而 Safari 17.4 才真正稳定。这意味着，即使 @supports (selector(&)) 返回 true，用户看到的样式仍可能错乱——必须真机验证，不能只信检测结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
