HTML和CSS原生嵌套配合的结构设计

原生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。写错或不支持，就是零渲染，连控制台都看不到提示——你得靠实测，而不是靠文档标绿就放心。