postcss-nested插件必须严格按顺序加载才能生效：postcss-import第一（确保导入内容可见），postcss-nested第二（展开嵌套），autoprefixer最后（加前缀）；否则会原样输出或报错。
嵌套本身不是CSS原生支持的语法，所谓“CSS组合选择器嵌套”，实际是用组合选择器模拟嵌套语义，或借助PostCSS Nested等工具实现书写上的嵌套。直接在原生CSS里写 .card .title 不叫嵌套，叫后代选择器；而 .card { .title { color: red; } } 这种写法必须经PostCSS处理才能生效。
原生CSS中没有嵌套语法，只有组合选择器层级关系
浏览器只认扁平的选择器字符串，.layout > .header nav ul li a 是合法的组合，但它的“层级感”来自HTML结构映射，不是语法嵌套。容易误以为这是嵌套，其实是多级组合：
- 空格（后代）和
>（子元素）决定作用范围，不是缩进嵌套 - 写成
.layout > .header nav ul li a比写成.layout > .header > nav > ul > li > a更安全——后者要求每一层都严格为直接子元素，稍有DOM变动就失效 - 过度依赖深层组合（如5级以上）会降低可维护性，也影响渲染性能，尤其在动态更新频繁的区域
PostCSS Nested如何实现真正嵌套写法
如果你用PostCSS + postcss-nested 插件，就能写带缩进的嵌套规则，它会在构建时展开成原生CSS：
.card {
padding: 1rem;
&__title {
font-weight: bold;
}
&:hover {
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
@at-root .dark-theme & {
background: #333;
}
}
注意几个关键点：
-
&表示父选择器，生成.card__title和.card:hover -
@at-root跳出当前嵌套上下文，用于写BEM修饰符或主题类组合，比如.dark-theme .card - 不加
&的子规则（如img）会被展开为.card img，仍是后代选择器
组合选择器嵌套常见的失效场景
很多“嵌套失效”其实源于对组合逻辑理解偏差，典型表现：
- 写了
.form input[type="text"]却发现样式没生效——检查是否漏了type属性，或输入框被包裹在div里导致层级断裂 - 用
.list > li:first-child想控制第一个项，但实际第一个li前有注释或文本节点，:first-child就不匹配了，改用:nth-of-type(1)更稳 - 在Sass里写了
.btn { &--primary { ... } }，输出后发现.btn--primary没生效——确认编译后是否真的生成了该类名，而不是仅靠组合推导
真正难的不是怎么写嵌套，而是判断什么时候该用组合、什么时候该抽离独立类名。越深的组合越脆弱，越容易被DOM微调破坏。与其拼命嵌套，不如用BEM命名明确边界，再用简单组合收口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
