如何利用HTML CSS原生嵌套语法新特性实现嵌套样式？

本文共计948个文字，预计阅读时间需要4分钟。

原生+CSS+嵌套目标浏览器仅限于Chrome 119、Edge 119、Safari 17.4，Firefox尚不支持；写法规范有误则会被浏览器整条忽略，且不会报错、不会降级、不会提示——它就安静地失效了。

原生 CSS 嵌套必须用 & 或 @nest，不能直接写子选择器

很多人照着 Sass 习惯写：.card { h2 { color: blue; } }，这在原生 CSS 中完全无效，浏览器会跳过整条规则。必须显式表明嵌套关系：

• & 用于“当前选择器 + 后续部分”，比如 .card { & h2 { color: blue; } } → 编译为 .card h2
• & 必须紧贴选择器开头，&.active 合法，.active & 或 & .active（中间有空格）都非法
• 遇到复杂组合（如 article > header + section），& 无法表达时，必须用 @nest：article { @nest & > header + section { margin-top: 1rem; } }
• @nest 是硬性语法要求，漏写或拼错（如 @nestt）会导致该块样式彻底丢失

& 在伪类/伪元素里要特别注意空格

&:hover 和 &::before 是安全的，但一加空格就变味：

• &:hover → 正确，等价于 .btn:hover
• & :hover → 错误，多了空格，变成后代选择器 .btn :hover（匹配 .btn 内任意被 hover 的子元素）
• &::before → 正确
• & ::before → 错误，同上，语义变成 .btn ::before（虽然多数情况也生效，但逻辑已偏移）
• 复合伪类如 &:is(.primary, .secondary) 可以，但 &:where(.active) 要确保目标浏览器支持 :where()

媒体查询可以内联，但不能嵌套在 @nest 里

你可以在选择器块里直接写 @media，它会自动绑定到父选择器作用域：

立即学习“前端免费学习笔记（深入）”；

.dialog { padding: 1rem; @media (min-width: 768px) { padding: 2rem; } &__header { font-weight: bold; @media (prefers-reduced-motion: reduce) { animation: none; } } }

但以下写法是非法的：

• @nest & @media (max-width: 600px) { ... } —— @nest 只接受选择器，不接受 at-rule
• & { @nest & span { ... } } —— @nest 不支持嵌套在另一个嵌套块内部
• 所有媒体查询必须写在规则顶层或 & 子规则中，不能包裹在 @nest 里

兼容性兜底不是可选项，而是上线前必做的检查项

如果你的项目需要支持 Safari 16–17.3、Chrome ≤118 或任何 Firefox 版本，& 和 @nest 都不会回退成普通 CSS —— 它们会被静默丢弃。这意味着：

• 不要指望构建工具自动 polyfill：原生嵌套是运行时特性，没有 postcss 插件能把它“编译”成旧版 CSS
• 若需兼容，只能用预处理器（Sass/Less）或手动展开，比如把 .card { & h2 { ... } } 改成 .card h2 { ... }
• 检查 caniuse.com/css-nesting 并结合你的真实用户 UA 数据判断是否启用——别只看“Chrome 112+ 支持”，112 到 119 之间还有多个不稳定实验阶段
• 最易被忽略的一点：& 在标签选择器嵌套中行为不一致（如 article { & h2 { ... } } 在 Safari 17.4+ 才稳定，17.0–17.3 可能失效）