&必须紧贴父选择器末尾无空格，否则编译为后代选择器而非自身伪类；多伪类用逗号分隔，不可空格连接；&不能用于:not()括号内，仅作父选择器占位符。
Less里&怎么写伪类才不会漏掉父选择器
直接说结论：&必须紧贴父选择器末尾，中间不能有空格，否则编译后伪类会脱离上下文、变成全局样式。这是最常踩的坑。
比如你写：
.btn {
color: #333;
&:hover { color: #007bff; }
}
编译后是 .btn:hover，没问题；但如果你手抖多打了个空格：
.btn {
color: #333;
& :hover { color: #007bff; } // 注意 & 后面多了个空格
}
编译结果就变成 .btn :hover（带空格），意味着“.btn内部任意元素的:hover”，完全不是你想要的按钮自身状态。
立即学习“前端免费学习笔记（深入）”；
-
&不是变量，是编译时的父选择器占位符，它不参与运行时计算 - 嵌套多层时，
&始终指代最近一层的父选择器，不是最外层 - 想引用更外层的父选择器？得用
~""或提前用变量存住，&做不到
多个伪类连用时&要不要重复写
不用重复，一次&就能串联所有伪类，关键是写法顺序要符合CSS原生逻辑。
例如想同时支持:hover和:focus，别这么写：
.input {
border: 1px solid #ccc;
&:hover { border-color: #007bff; }
&:focus { border-color: #28a745; }
}
这没问题，但如果你想合并成一个规则块（比如都加outline），就得用逗号分隔：
.input {
border: 1px solid #ccc;
&:hover,
&:focus { outline: 2px solid rgba(0,123,255,.25); }
}
注意：&:hover,&:focus编译后是.input:hover,.input:focus，正确；但如果你写成&:hover &:focus（中间没逗号），就会变成.input:hover .input:focus，语义全错。
- 逗号分隔的伪类共享同一组声明，适合视觉表现一致的场景
- 需要差异化样式时，必须分开写，避免用
!强制覆盖 - IE8不支持多伪类逗号写法（虽然Less能编译，但浏览器不认），老项目需留意
伪类里再嵌套子元素，&还管用吗
管用，但容易误以为“继承了父级上下文”，其实&只绑定当前层级的父选择器。
看这个例子：
.card {
padding: 1rem;
&:hover {
background: #f8f9fa;
.card-title { color: #007bff; } // ✅ 正确：.card:hover .card-title
}
}
这里.card-title前面没加&，它就是相对&:hover作用域的子选择器，编译后是.card:hover .card-title，符合预期。
但如果你强行加&：
&:hover {
& .card-title { color: #007bff; } // ❌ 编译为 .card:hover .card:hover .card-title
}
结果多了一层.card:hover，样式根本不会生效。
-
&在伪类内部再用，等于把当前伪类选择器重复拼接一遍 - 想选伪类下的子元素，直接写类名就行，不需要
& - 真要拼复合选择器（比如
.card:hover .card-title.active），用&.active，不是& &.active
用&处理:not()这类函数型伪类要注意什么
:not()本身是CSS函数，Less不解析它内部逻辑，所以&只能放在:not()外面，不能插进括号里。
正确写法：
.btn {
&:not(:disabled) { opacity: 1; }
&:not(.is-hidden) { display: block; }
}
编译后分别是.btn:not(:disabled)和.btn:not(.is-hidden)，没问题。
错误写法：
&:not(&:disabled) { ... } // Less报错：&不能出现在括号内
&:not(.&-disabled) { ... } // 语法错误，&不能参与字符串拼接
想动态生成:not()里的类名？得用replace()或e()函数，&做不到。
-
&不支持在伪类函数内部使用，这是Less语法限制，不是bug -
:not()里写多个选择器（如:not(:disabled, .is-hidden)）要等CSS原生支持，Less只负责原样输出 - 复杂否定逻辑建议拆到JS控制类名，比在Less里硬凑更可控
&怎么写，而是当嵌套超过三层、又混着:not()和&:hover时，人眼很难一眼看出最终生成的选择器长什么样——这时候别靠猜，编译出来瞄一眼CSS才是最省时间的做法。 
