Less嵌套不改变CSS权重，关键在编译后选择器字符串；应显式用>、禁用空格、&开头写伪类，避免超3层嵌套和跨区域硬套。
Less嵌套怎么写才不破坏CSS选择器权重？
Less嵌套本身不改变最终CSS的生成逻辑，但容易让人误以为“缩进=层级变浅”，结果写出 & .child 这种意外提升权重的写法。真正决定权重的是编译后生成的选择器字符串，不是Less源码缩进。
- 直接子元素要用
>显式声明：> .item→ 编译为.list > .item，避免意外变成.list .item - 避免无意识的空格：写成
&.active（无空格）才是拼接类名，写成& .active（有空格）就变成后代选择器 - 伪类/伪元素必须用
&:或&::开头，否则会丢失父级上下文，比如:hover单独写会变成全局:hover，应写&:hover
什么时候不该用嵌套？
嵌套适合表达「视觉层级强关联」的组件，比如菜单、卡片、表单组；但遇到「跨区域复用」或「响应式断点分散」时，硬套嵌套反而增加维护成本。
- 媒体查询别全塞在嵌套里：
@media (max-width: 768px) { & { ... } }会让所有子规则重复输出一遍断点代码，建议把断点提出来单独写 - 工具类（如
.text-center、.m-2）不要用嵌套定义，它们本就不该依赖上下文 - 第三方组件样式（如
.react-datepicker）嵌套后难以覆盖，优先用原生类名组合或属性选择器
& 符号的三种常见误用
& 是Less嵌套的核心，但它不是“当前选择器”，而是“父级选择器的完整副本”。理解这点才能避开大多数坑。
- 写
& + .sibling→ 正确生成.card + .sibling；但写成+ .sibling（漏了&）→ 变成全局+ .sibling，可能命中完全无关的元素 - 写
&（HTML实体）代替&→ Less编译直接报错：ParseError: Unrecognised input - 在循环 mixin 中误用：
.make-col(@n) when (@n > 0) { &:nth-child(@n) { ... } }里的&会绑定到调用位置的选择器，不是 mixin 定义处的父级
嵌套导致CSS体积膨胀的真实案例
一个5层深的嵌套块，如果内部有4个子选择器、又加了2个伪类和1个媒体查询，最终可能生成几十行重复前缀的CSS——尤其当父选择器本身带BEM长命名时。
立即学习“前端免费学习笔记（深入）”；
- 用
lessc --lint检查嵌套深度，超过3层就该警惕 - 编译后搜
.header .nav .item .link:hover这类超长选择器，确认是否真有必要保留全部层级 - 对纯布局类（如
.grid-col-6）改用 CSS 自定义属性或 utility-first 方案，比嵌套更轻量
