原生CSS嵌套不支持.card { .title { } }这种Sass风格隐式写法，必须显式使用&或@nest；Chrome119+/Edge119+/Safari17.4+稳定支持，Firefox全面不支持且静默忽略。
原生 CSS Nesting 不是“写个 .card { .title { } } 就能跑”，它必须显式用 & 或 @nest，且浏览器支持极不均衡——Chrome 119+、Edge 119+、Safari 17.4+ 才稳定可用，Firefox 全面不支持，连语法错误都静默跳过。
为什么直接写 .card { .title { color: blue; } } 无效？
这是最常踩的坑：原生嵌套不接受 Sass 风格的隐式嵌套。浏览器看到这种写法会直接忽略整条规则，DevTools 的 Styles 面板里根本不会出现它，也不报错。
- ✅ 正确写法：
.card { & .title { color: blue; } }（&必须在嵌套规则开头，紧贴后续选择器） - ❌ 错误写法：
.card { .title { color: blue; } }（无&，非法，整块丢弃） - ❌ 错误写法：
.card { &.title { }（漏右大括号，整条规则失效）
& 的空格位置如何决定选择器语义？
& 前后有没有空格，直接决定编译出的选择器关系类型——这不是风格问题，是语义开关。
-
&.active→ 编译为:is(.card).active，即同元素双类（如.card.active） -
& .active→ 编译为:is(.card) .active，即后代选择器（.card .active） -
.featured &→ 编译为.featured :is(.card)，匹配.featured内任意层级的.card -
&:hover✅；& :hover❌（多空格后变成.card :hover，语义完全偏移）
什么时候必须用 @nest 而不是 &？
& 只能表达“当前父选择器参与组合”，遇到兄弟、父子、逻辑组合等复杂关系时，它无能为力，@nest 是唯一合法出口。
立即学习“前端免费学习笔记（深入）”；
- ✅ 合法：
@nest & + .aside { margin-top: 1rem; }（紧邻兄弟） - ✅ 合法：
@nest & > header { padding: 1em; }（直接子元素） - ❌ 无效：
& { @nest & span { } }（@nest不能嵌套在&块内） - ❌ 无效：
@nest .card__title { }（缺&，会被编译成.card__title.card__title）
上线前必须验证的三件事
原生嵌套没有降级、不报错、不警告。你在本地 Chrome 看着完美，用户在 Safari 17.3 可能 hover 失效，在 Firefox 则彻底白屏。
- 查真实用户覆盖：iOS Safari 17.3 对
&:hover有已知缺陷，&::before却正常 - 确认构建流程：Vite/Webpack 默认不启用
postcss-nesting，压缩阶段可能把&当普通字符处理，导致线上样式丢失 - 给 Firefox 用户兜底：要么双写规则（
.card { } .card h2 { }），要么用 PostCSS 统一转译，别指望浏览器自动兼容
真正容易被忽略的，是 Safari 17.3 的 hover 兼容缺陷和 Firefox 的零支持——它们不会报错，只会让样式静默消失。
