截至2026年5月，原生CSS嵌套仅Chrome 119+、Edge 119+、Safari 17.4+稳定支持，Firefox仍不支持；必须用&或@nest显式声明，写错即整条静默失效，不报错不降级。
原生 CSS 嵌套（& 和 @nest）在 2026 年已稳定可用，但**不是所有浏览器都支持，且写错一个符号就会整条规则静默失效**——它不报错、不警告、不降级，只当没写过。
哪些浏览器真正支持原生 CSS 嵌套
截至 2026 年 5 月，只有以下版本起稳定支持（非实验性）：
-
Chrome 119+及基于它的Edge 119+ -
Safari 17.4+（注意：Safari 17.0–17.3 仅部分支持，&:hover可能失效） -
Firefox 仍不支持—— 所有含&或@nest的规则会被直接跳过
验证方式：打开 chrome://flags/#enable-css-nesting（Chrome），或访问 ishoudin.com 查看实时兼容表。别信“Can I Use”上标绿就放心上线，它没标注 Safari 17.3 的 hover 兼容缺陷。
& 的写法限制和常见失效点
& 是当前选择器的占位符，但它对空格、位置、组合极其敏感：
立即学习“前端免费学习笔记（深入）”；
-
& h2✅ 合法，编译为.card h2 -
&.active✅ 合法，编译为.card.active -
& .active❌ 多了空格，变成后代选择器.card .active（语义偏移） -
.active &❌&必须在最前面，否则无效 -
&:hover✅ 安全 -
& :hover❌ 变成.btn :hover，匹配的是 .btn 内任意被 hover 的子元素 -
&::before✅ -
& ::before❌ 逻辑已变，虽可能渲染成功，但不符合预期作用域
一旦写错，DevTools 的 Styles 面板里根本看不到这条规则——它已被浏览器丢弃。
什么时候必须用 @nest 而不能只靠 &
& 只能表达“当前选择器 + 后缀”，无法处理复杂关系。遇到这些情况，@nest 是唯一解：
- 需要兄弟/父子/相邻组合器：
@nest & > header + section - 想匹配更精确的上下文：
@nest article & > h2:first-child - 嵌套伪类组合：
@nest &:is(.primary, .secondary) .icon
注意：@nest 是硬语法，漏写、拼错（如 @nestt）、或放在媒体查询内部（@nest & @media (max-width:600px) { }）都会导致整块失效。它也不能嵌套在另一个 & 规则里：& { @nest & span { } } 是非法的。
上线前必须做的三件事
原生嵌套不是“写了就能跑”，它没有 fallback：
- 检查构建工具是否启用了
postcss-nesting（如用 Vite / Webpack），否则开发环境能跑，生产环境可能因压缩或转译被破坏 - 在目标用户主流浏览器中实测关键交互（比如
&:hover、&::before是否触发）——Safari 17.3 下&:hover会静默忽略 - 凡涉及 Firefox 用户（哪怕只占 5%），必须提供降级方案：要么用传统展开写法并保留注释，要么用
@supports selector(&) { }包裹，再在外层写兜底规则
最常被忽略的点：你以为自己在写现代 CSS，其实只是在写一份对多数用户不可见的“装饰性注释”。
