原生CSS嵌套必须显式使用&：合法写法包括&:hover、& p、& + &、& > .content等；非法写法如直接写.title或p{}；不支持Sass式无&缩进；推荐用于媒体查询、伪类收拢和组件隔离，避免超3层或替代BEM命名。
可以，但必须满足两个前提：使用支持原生嵌套的现代浏览器（Chrome 119+、Firefox 120+、Safari 17.2+），且嵌套写法必须符合 CSS Nesting 规范——不能直接写 div p { }，而要显式用 & 或相对选择器语法。
哪些嵌套写法是合法的？
原生 CSS 嵌套不是“把旧写法缩进一下就行”，它有明确语法规则：
-
&必须出现：父选择器内写子规则时，若要生成组合选择器（如.card:hover），必须用&:hover；省略&直接写:hover是无效的 - 后代关系默认隐含：写
.card { p { color: blue; } }是非法的，因为p是类型选择器，开头没带&或伪类/属性符号；正确写法是.card { & p { color: blue; } }或.card { :is(p) { color: blue; } } - 兄弟、子元素等关系需显式声明：想写
.item + .item，就得写成.item { & + & { margin-top: 8px; } }；想限制只对直接子元素生效，得用& > .content
为什么不能无脑套用 Sass 风格？
很多人从预处理器转过来，习惯写：
.card {
.title { font-size: 1.2em; }
.body { line-height: 1.5; }
}
这段在 Sass 中输出 .card .title 和 .card .body，但在原生 CSS 中会报错。原因在于：
立即学习“前端免费学习笔记（深入）”；
- 原生嵌套不自动拼接父选择器——它要求你主动用
&表达“这里要继承上下文” - 上面例子中
.title是一个独立类选择器，浏览器无法判断它是想匹配.card .title还是全局.title - 真正等价的原生写法是：
.card { & .title { font-size: 1.2em; } & .body { line-height: 1.5; } }
嵌套 vs 传统写法：性能和可维护性怎么权衡？
嵌套本身不提升运行时性能，反而可能因过度使用增加 CSS 解析负担。关键看你怎么用：
- ✅ 推荐场景：媒体查询内嵌、伪类/伪元素收拢（如
button { &:hover { } &::before { } }）、组件级作用域隔离（如.modal { &__header { } &__footer { } }） - ❌ 避免场景：超过 3 层深度（
.layout .main .section .title改成嵌套后仍是逻辑过深）、用嵌套替代 BEM 类命名（.card { &__title { } }可以，但.card { .title { } }违反 BEM 原则且难复用） - ⚠️ 注意优先级：嵌套会叠加特异性。例如
.card { & .title { } }编译后是.card .title（特异性 0,1,1），比单独写.title（0,0,1）高，容易覆盖不到预期样式
最易被忽略的一点：原生嵌套不支持跨规则引用，比如你不能在 .btn 规则里用 @nest .theme-dark & { } 去条件覆盖——那属于 @nest 的特殊语法，且必须出现在独立规则中，不能藏在嵌套块内部。
