原生CSS嵌套（@nest与&）是W3C正式标准，Chrome 116+/Safari 17.4+默认启用，Firefox 117+需手动开启layout.css.nesting.enabled；@nest必须显式书写且&仅在其内合法，漏写或错位将导致整条规则静默失效。
因为 CSS Nesting 已成为 W3C 正式推荐标准（CSS Nesting Module Level 1），Chrome 116+、Firefox 117+、Safari 17.4+ 均已默认启用，不再需要实验性开关或构建工具介入——它不是“部分支持”，而是已落地的原生能力。
Chrome / Edge 用户为什么能直接用 @nest 和 &？
Chrome 112 起开始实验性支持，116 版本起默认开启且稳定。关键点是：@nest 必须显式写出，& 不能孤立出现；浏览器解析器会将 .card { @nest & h2 { color: red; } } 直接编译为 .card h2 { color: red; }，不经过任何 JS 或构建步骤。
-
@nest是语法必需项，漏写就静默失效（DevTools Styles 面板里根本看不到该规则） -
&只在@nest内部合法，.card { & h2 { ... } }是非法写法，会被整条丢弃 - Chrome 不支持
@supports (nesting-selector: selector())检测，需靠 UA 字符串或特性嗅探兜底
Firefox 用户为什么写了 @nest 还没效果？
Firefox 117+ 虽已实现规范，但截至 2026 年 6 月仍**未默认启用**——必须手动打开 layout.css.nesting.enabled 开关。这不是版本不够，而是功能被默认禁用。
- 访问
about:config→ 搜索layout.css.nesting.enabled→ 双击设为true - 重启浏览器后才生效，且无任何 UI 提示或控制台警告
- 即使开了，
@nest仍不支持嵌套使用（如@nest & ul { @nest & li { ... } }是语法错误）
Safari 17.4+ 为什么是真正“开箱即用”的节点？
Safari 17.0–17.3 需手动开启实验特性，17.4 是首个默认启用、无需配置、兼容 BCD 数据的稳定版。这意味着：只要用户设备升级到 iOS/macOS 最新版，@nest 就能直接工作。
立即学习“前端免费学习笔记（深入）”；
-
@nest和&在&.is-active、& > .item等复合场景均可靠 - 不支持
@supports检测（@supports (nesting-selector: selector())返回 false） - 若项目需兼容 Safari 16.x 或旧版 iPadOS，裸用
@nest= 样式完全丢失
真正容易被忽略的是：原生嵌套不是“写了就能跑”，而是“写了 + 浏览器开了 + 语法对了 + 没混用预处理器”四者同时成立才生效；任意一环断掉，结果都是静默失败——连 warning 都没有。
