原生CSS嵌套（&和@nest）仅为语法糖，不改变HTML结构；&位置敏感，空格即错误；复杂关系需@nest；浏览器支持有限，Firefox完全不支持，须实测降级。
原生 CSS 嵌套不等于 HTML 嵌套，别混用
HTML 的嵌套是结构层级（比如 <ul> 里只能放 <li>），而 CSS 原生嵌套（& 和 @nest）只是书写语法糖，不影响 DOM 结构。写 .card { & h2 { color: red; } } 不会改变 <div class="card"><h2>标题</h2></div> 的 HTML 层级，它只生成等价于 .card h2 的选择器。
常见错误是以为写了嵌套 CSS 就能放松 HTML 合法性约束——结果在 <p> 里塞 <div>，浏览器自动闭合 <p>，导致样式失效、DevTools 显示结构错乱。CSS 再怎么嵌套，也救不了非法 HTML。
& 写法必须紧贴开头，空格就是灾难
& 是占位符，不是运算符，位置和空格极其敏感：
-
& h2✅ → 编译为.card h2 -
&.active✅ → 编译为.card.active -
& .active❌ → 多了个空格，变成后代选择器.card .active，语义偏移 -
.active &❌ →&必须在最前，否则整条规则被浏览器静默丢弃 -
&::before✅，但& ::before❌ → 后者实际匹配.card ::before，作用域已扩大
所有写错的规则，在 DevTools 的 Styles 面板里根本不会出现——它不报错、不警告，就当没写过。
立即学习“前端免费学习笔记（深入）”；
复杂关系必须用 @nest，& 搞不定
当需要表达父子、相邻、兄弟或伪类组合时，& 无能为力，必须上 @nest：
-
@nest & > header + section→ 匹配直接子<header>后紧邻的<section> -
@nest article & > h2:first-child→ 限定只在<article>内部的首个<h2> -
@nest &:is(.primary, .secondary) .icon→ 在带任一 class 的元素内找.icon
注意：@nest 是硬语法，拼错（如 @nestt）、漏写、或放在媒体查询内部（@nest & @media (max-width:600px) { }）都会让整块样式彻底消失。它也不能嵌套在另一个 & 规则里。
上线前必须验证三件事：浏览器、构建工具、降级
截至 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。写错或不支持，就是零渲染，连控制台都看不到提示——你得靠实测，而不是靠文档标绿就放心。
