Less嵌套不控制权重，而是机械翻译为后代选择器，每层缩进增加第三位权重值；伪类和&__body不增权，但普通嵌套和标签嵌套会显著提升权重，超3层将导致覆盖困难，extend()在嵌套中复制规则加剧冗余。
Less嵌套本身不“控制”权重，它只是把缩进结构机械翻译成空格分隔的后代选择器——每多一层缩进，编译后选择器就多一个类名或标签，第三位权重数字就+1。这不是设计缺陷，是语法本质决定的。
嵌套直接对应CSS权重的第三位数字
浏览器计算权重时，.card .header .title 是 0-3-0（3 个类名），而 .card__title 是 0-1-0。Less 编译器不会帮你降权，它只忠实拼接：.a { .b { .c { color: red; } } } → .a .b .c { color: red; }。你写的每一层大括号，都在给最终选择器加一位计数。
- 伪类如
&:hover不增加层级计数（.btn:hover权重仍是 0-1-1） -
&__body生成的是单个类名，不拉高权重；但.body（无&）会变成.card .body，权重+1 - 标签嵌套更危险：
ul { li { a { color: blue; } } }→ul li a（0-0-3），比a高出整整三级
超过3层嵌套会让覆盖成本指数级上升
0-3-0 还能靠 .title--urgent 覆盖；到 0-4-0（比如 .page .main .card .title），你就得写两个类、加属性选择器，甚至被迫用 !important ——这不是在写样式，是在给权重打补丁。
- 检查编译后 CSS：如果看到大量
.layout .content .section .item p这类路径，说明嵌套已失控 - Chrome DevTools 的 “Coverage” 面板里高亮出的未用 CSS，80% 都来自这种长链选择器
- Vue/React 的 scoped 样式（如
.btn[data-v-abc]）不解决权重问题，只是加了哈希，.btn[data-v-abc] .icon仍是 0-2-0
混用 extend() 和嵌套会让权重爆炸式重复
extend() 在嵌套块里不是“复用”，而是“复制粘贴”。目标选择器会被完整展开进当前上下文，且无法跨文件感知——如果 .visually-hidden 定义在未 @import 的文件里，Less 会静默忽略 extend，但嵌套结构照常输出冗余选择器。
-
.modal { .header { .title { &:extend(.visually-hidden all); } } }→ 编译为.modal .header .title { … }（全部声明复制一遍） - 同一份
.visually-hidden被 3 个不同嵌套块调用，就会产出 3 份完全相同的规则块，彼此不能合并 - 运行
lessc --verbose观察输出行数，若某段嵌套导致行数翻倍，基本就是extend+ 嵌套在叠加伤害
真正难处理的不是“怎么写嵌套”，而是“什么时候不该写嵌套”——当缩进开始让你犹豫要不要加 @at-root，其实答案已经很明确：该用 &__element 拆了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
