PostCSS嵌套本身不改变CSS权重规则，但编译后选择器权重增加，根源在于人为写法：空格生成后代选择器（如.card .header，权重0-2-0），&拼接生成低权类名（如.card__header，权重0-1-0），@nest漏写&或误用仍导致高特异性。
PostCSS 嵌套语法（如 @nest 或插件 postcss-nested）本身不改变 CSS 权重规则，但编译后选择器权重增加，几乎全是人为写法导致的——你写的嵌套结构，直接翻译成了高特异性后代选择器。
PostCSS 嵌套不是“自动扁平化”，空格决定是否增权
PostCSS 的嵌套行为严格按空格和关系符展开，不像 Sass/LESS 那样默认用 & 拼接。一个空格就等于后代选择器，权重+1。
-
.card { .header { color: red; } }→ 编译为.card .header（权重 0-2-0） -
.card { &__header { color: red; } }→ 需要额外插件支持（如postcss-nesting+postcss-bem），否则报错或忽略& - 没装
&支持插件时，.card { .header { ... } }就是纯后代链，三层就到 0-3-0，四层就 0-4-0
常见错误：把 HTML 结构当样式层级来写
很多人看到 nav ul li a 在 HTML 里嵌套深，就在 PostCSS 里照着缩进写，结果生成的选择器既冗长又脆弱。
- 错误写法：
nav { ul { li { a { &:hover { ... } } } } }→ 编译出nav ul li a:hover（权重 0-3-1） - 真实问题：DOM 一改（比如
li换成div），样式全失效；想覆盖它，得写nav ul li a:hover span或加!important - 更稳写法：
a.nav-link { &:hover { ... } }，权重恒为 0-1-1，且不依赖父级结构
@nest 是显式控制，但容易漏掉父选择器引用
@nest 是原生 CSS 嵌套标准（Chrome 119+ 支持），PostCSS 插件可模拟。但它要求你手动写 @nest，不写就退化为后代嵌套。
立即学习“前端免费学习笔记（深入）”；
-
.card { @nest &__header { color: red; } }→.card__header（0-1-0） -
.card { @nest .header { color: red; } }→.card .header（0-2-0），@nest后面没跟&，等于白加 - 漏掉
&是高频失误：编辑器不会报错，但编译结果已悄悄增权
第三方组件或工具类嵌套是权重炸弹
把 .react-datepicker 或 .u-text-center 套进 .form { ... } 里，PostCSS 会忠实地拼出 .form .react-datepicker，权重翻倍还锁死复用场景。
- 错误：
.form { .react-datepicker { width: 100%; } }→.form .react-datepicker（0-2-0） - 正确：
@at-root .react-datepicker { width: 100%; }（需插件支持）或单独文件引入 - 工具类尤其危险：
.btn { .u-hidden { display: none; } }→.btn .u-hidden，但.u-hidden本该全局生效
真正难的不是搞懂 @nest 语法，而是每次敲 { 前得判断：这个嵌套，是业务语义必需的关联，还是仅仅因为“它在 HTML 里被包着”？后者一律拆成独立类名或用属性选择器收口。
