原生 CSS 嵌套（& 和 @nest）本质上是一种书写语法糖，并不会改变 HTML 的 DOM 结构。然而，实际开发中有一个容易踩的坑：& 的位置非常敏感，空格稍有偏差就会导致规则失效；遇到复杂的选择器关系时，必须借助 @nest；而且浏览器的兼容性远未达到理想状态，Firefox 至今完全不支持原生嵌套，因此上线前务必进行充分测试并做好降级方案。
原生 CSS 嵌套并非 HTML 结构嵌套，切勿混淆使用
HTML 的嵌套体现的是结构层级关系，例如 ；而 CSS 原生嵌套（& 和 @nest）仅仅是书写层面的语法糖，完全不会改变 DOM 的实际结构。举个例子，编写 .card { & h2 { color: red; } } 并不会影响 标题
.card h2 的选择器。
常见的误区是，认为使用了嵌套 CSS 就可以放宽 HTML 的合法性限制——结果在 中嵌套 ，浏览器会自动闭合 ，导致样式无法生效、DevTools 中显示结构错乱。简而言之，CSS 嵌套再强大，也无法拯救非法的 HTML 结构。
& 必须紧贴选择器开头，空格是致命错误
& 是占位符而非运算符，它的位置和空格处理极为敏感，一个小失误就可能导致整条规则直接被忽略。来看几个典型示例：
& h2✅ → 编译为.card h2&.active✅ → 编译为.card.active& .active❌ → 多了一个空格，变成后代选择器.card .active，语义发生偏移.active &❌ →&必须位于最前面，否则整条规则会被浏览器静默丢弃&::before✅，但& ::before❌ → 后者实际匹配.card ::before，作用域已被扩大
最棘手的是，所有写错的规则在 DevTools 的 Styles 面板中根本不会出现——它不报错、不警告，就像从未被编写过一样。这意味着你只能依靠肉眼逐条排查。
复杂关系必须借助 @nest，& 无法独自胜任
当需要表达父子、相邻、兄弟或伪类组合等复杂关系时，& 就显得力不从心，此时必须使用 @nest：
@nest & > header + section→ 匹配直接子元素@nest article & > h2:first-child→ 限定仅在内部的第一个@nest &:is(.primary, .secondary) .icon→ 在带有任一 class 的元素内部查找.icon
注意：@nest 是硬语法规则，拼写错误（如 @nestt）、遗漏书写，或者将其放在媒体查询内部（@nest & @media (max-width:600px) { }）都会导致整块样式彻底消失。此外，@nest 不能嵌套在另一个 & 规则内，这一点需要格外警惕。
上线前必须验证三件事：浏览器兼容性、构建工具配置、降级策略
截至 2026 年 7 月，原生嵌套仅在 Chrome 119+、Edge 119+、Safari 17.4+ 中获得稳定支持；Firefox 仍完全不支持，所有包含 & 或 @nest 的规则都会被跳过。
- 检查构建流程：Vite 或 Webpack 若未启用
postcss-nesting，生产环境压缩后可能破坏嵌套语法 - 实测关键交互：Safari 17.3 下
&:hover会静默失效，必须在 17.4+ 版本中验证 - 提供降级方案：针对 Firefox 或旧版 Safari 用户，要么使用传统展开写法并添加注释，要么用
@supports selector(&) { }包裹，并在外层编写兜底规则
最容易被忽略的一点是：原生嵌套没有 fallback 机制。写错或浏览器不支持，结果就是零渲染，连控制台都不会给出任何提示。你必须依赖实际测试，而不是看到文档标注绿色就放心——这才是关键所在。
