Less嵌套本身不提高权重，但会生成冗余后代选择器（如.card .header .title，权重0-3-0），导致覆盖困难；应优先用BEM命名（.card__title，0-1-0）、&精准拼接、@at-root抽离规则来控制权重。
Less嵌套规则本身不“提高权重”，它只是忠实地把缩进转成空格分隔的后代选择器——而浏览器计算权重时，每多一个类名或标签名，权重就叠加一次。你写的嵌套越深，编译出的选择器就越长，权重自然就高了。
嵌套直接生成冗余后代选择器
Less 不做语义压缩，也不降权，它只拼接。你写：
.card {
.header {
.title {
color: red;
}
}
}
编译结果就是 .card .header .title（权重 0-3-0），而不是你心里想的“局部作用域”。这跟手写一样，但更容易误以为“缩进=作用域隔离”。
- 每层缩进都对应一个空格 + 选择器片段，
.a .b .c就是三个独立类名的后代关系 - 伪类（如
&:hover）不增加层级计数，但& .icon这种带空格的写法会多一层后代 -
&__title是安全的，因为它生成新类名.card__title（权重0-1-0），不是后代链
权重过高导致覆盖困难的真实表现
不是“覆盖不了”，而是你得用更高权重才能赢——结果就是代码越来越臃肿、越来越难维护。
- 想改
.card .header .title的颜色？写.title-highlight没用，权重只有0-1-0，压不住0-3-0 - 常见补救：加
!important，或者硬凑.card .header .title.highlight，等于把问题往后推 - DevTools 的 Computed 面板里看到 specificity 显示
0,3,0或更高，基本就该重构了
为什么 & 符号用错会让问题更糟
& 是父选择器字符串的原样复制，不是“作用域开关”。它不帮你降权，只决定拼接方式。
- 错：
.modal { & .close { opacity: 0.5; } }→ 编译为.modal .close，多一层无意义后代 - 错：
.list { & li { margin: 4px; } }→ 实际仍是.list li，&完全没起作用 - 对：
.btn { &--primary { ... } }→.btn--primary，单类名，权重稳定 - 对：
a { &:hover { ... } }→a:hover，伪类不额外加层级
@at-root 不是补丁，而是提前止损的开关
@at-root 的作用是切断当前嵌套上下文对后续规则的选择器前缀继承——它解决的是“不该被嵌套却被动嵌套”的问题，不是给已写完的四层嵌套打补丁。
- 错：
.btn { @at-root { &--large { ... } } }→ 报错，@at-root后必须跟完整选择器或规则集 - 对：
.card { @at-root .card--compact { padding: 4px; } }→ 输出.card--compact，脱离父链 - 对：
.btn { @at-root @media (min-width: 768px) { &--large { ... } } }→ 输出干净媒体查询，无冗余前缀 - 真正容易被忽略的点：看到
.a .b .c .d就该删缩进，而不是加@at-root续命
嵌套失控从来不是语法问题，而是语义误判：把“视觉缩进”当成“作用域控制”，把“写起来顺手”当成“结构合理”。BEM 命名和 & 拼接是主动降权手段，@at-root 是紧急脱钩机制——但最省力的做法，是在写第二层嵌套前，先问一句：这个层级，是不是真由 DOM 结构决定？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
