嵌套过深导致CSS选择器权重线性飙升，如.card .header .title为0-3-0，而.card__title恒为0-1-0；浏览器仅按空格分隔的简单选择器个数计算权重，每增一层即+1，且深层嵌套加剧回溯开销、覆盖困难与调试成本。
嵌套层级过深直接导致编译后选择器中类名数量暴增，权重数字（第三位）线性上涨，.card .header .title 是 0-3-0，而 .card__title 永远是 0-1-0——这不是“难覆盖”，是根本不想让你用常规方式覆盖。
为什么浏览器权重计算会失控
Less 嵌套不是逻辑分组，是字符串拼接。写三层：.card { .header { .title { color: red; } } }，编译结果就是 .card .header .title，浏览器按 CSS 特异性规则算出权重为 0-3-0。它不关心你缩进了几层，只数空格分隔的简单选择器个数。
- 每多一层嵌套，就多一个空格分隔的类名，权重第三位 +1
-
&不参与计数，但决定是否生成新类名：&__title→.card__title（低权），.title（无&）→.card .title（高权） - 伪类如
&:hover权重仍是 0-1-1，但.card .title:hover就是 0-2-1——多一层，就多一跳回溯
哪些嵌套写法会让权重突然翻倍
看似省事，实则在编译输出里埋了高权雷。常见误写：
-
.btn { .icon { margin-left: 4px; } }→ 编译为.btn .icon，权重 0-2-0，单用.icon根本无效 -
ul { li { a { &:hover { ... } } } }→ul li a:hover（0-3-1），比a:hover（0-1-1）高两级 -
.modal { &.is-open { .overlay { ... } } }→.modal.is-open .overlay（0-3-0），四层深度起步 - 媒体查询内忘加
&：@media (max-width: 768px) { .nav { li { a {} } } }→ 全局li a，不是.nav li a
怎么一眼看出你的嵌套已经失控
别等上线才发现，本地就能验证：
- 用
grep -r "\.[a-z]\+ \.[a-z]" src/扫出所有含空格的选择器，它们全是潜在高权点 - Chrome DevTools 的 “Coverage” 面板里，如果看到大量
.page .layout .content .section p这类长链，说明嵌套已溢出 - 运行
lessc --lint，部分版本可标出嵌套深度超 3 层的位置 - 检查编译后 CSS 文件：若出现超过 3 级组合（如 4 个点+空格），立刻拆解
真正难处理的不是“怎么修”，而是“怎么忍住不嵌套”。很多开发者把 HTML 结构原样搬进 Less，以为是在组织代码，其实是在给浏览器出考题——DOM 越深，匹配越慢；选择器越长，覆盖越难；而 & 写错一个空格，就等于亲手把权重推高一级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
