原生CSS中@nest是唯一安全表达复杂层级关系的语法，&必须置于@nest后且紧贴开头，漏写@nest或错位会导致整条规则静默失效，DevTools不显示也不报错。
原生 CSS 的 @nest 是唯一能安全表达复杂层级关系的语法，& 单独用在规则里（比如 .card { & h2 { } }）在 2026 年已彻底失效——Chrome/Safari/Edge 只认 @nest & 开头的结构，Firefox 默认不启用，且不报错。
为什么直接写 & 嵌套会静默失效
浏览器解析时把 & 当作非法符号跳过整条规则，DevTools 的 Styles 面板里根本看不到它，也不抛任何 warning。这不是兼容性 fallback 问题，是语法错误。
-
.card { & h2 { color: red; } }→ 全部被忽略（即使 Chrome 125） -
.card { @nest & h2 { color: red; } }→ 正确，编译为.card h2 { color: red; } -
.card { @nest .title & { font-weight: bold; } }→ 错误，&必须在最左侧，不能在中间
@nest 能写哪些复杂关系
@nest 不是增强 &，而是替代 & 处理所有非直系后代的场景。它必须跟完整选择器，不能省略上下文。
- 兄弟元素：
@nest & + .section✅；@nest + .section❌（缺左侧主体） - 父子组合：
@nest & > header nav a✅；@nest & > nav a❌（若nav不是header直接子元素，语义就断了） - BEM 修饰符：
@nest &.is-expanded✅；&.is-expanded❌（漏@nest会被当普通类拼接，变成.card.card.is-expanded） - 伪类链：
@nest &.active:hover::before✅；但注意 Safari 17.3 对&:hover有 bug，&::before可能正常，&:hover却静默失效
哪些写法会触发硬性失败
失败不是报错，是整块规则消失。构建流程或 loader 还可能提前破坏结构，尤其和 PostCSS 工具混用时。
立即学习“前端免费学习笔记（深入）”；
-
@nest &后多空格：@nest & .title→ 编译成.card .title，不是你想要的.card.title - 在
&块里再写@nest：& { @nest & span { } }→@nest被忽略，无展开 - 拼错关键字：
@nestt或@nest &@media→ 整块丢弃 - 混用
postcss-nesting插件：它把&当字符串拼接符，会提前替换掉@nest &中的&，导致浏览器收到的是无效结构
上线前必须验证的三个真实条件
本地 Chrome 能跑 ≠ 用户看到样式。必须确认：
- iOS Safari 实际版本：Safari 17.3 对
&:hover有静默失效缺陷，17.4 才修复；查真实用户 UA，别只看 caniuse 数据 - 构建流程是否透传
@nest：Vite ≥ 4.5 默认支持；Webpack 用户要确认css-loader≥ 6.8 且importLoaders没禁用嵌套解析 - Firefox 用户有没有兜底：它仍需手动开启
layout.css.nesting.enabled，生产环境不能依赖这个开关，得双写传统规则或用 PostCSS 统一降级
真正容易被忽略的，是 Safari 17.3 的 hover 缺陷和构建工具对 @nest 的静默截断——它们不会在控制台留痕迹，只在部分设备上让样式“突然消失”。
