less中&:hover编译为.btn:hover，而& :hover（&后有空格）编译为.btn :hover（后代选择器），因&仅代表紧邻上一级选择器且不接受空格；多伪类应逗号分隔合并书写。
Less里&写:hover为什么编译出来是后代选择器？
根本原因：你写了& :hover（&后面带空格），Less把它当成了“父选择器 + 后代关系符”，结果编译成.btn :hover，意思是“.btn内部任意元素的:hover”，不是按钮自己。
正确写法必须是&:hover——&和冒号之间**不能有空格**。这个空格是90%以上初学者踩坑的源头。
-
&:hover→ 编译为.btn:hover -
& :hover→ 编译为.btn :hover（错误） -
&: hover（冒号后空格）→ 大部分Less版本直接报ParseError
如何用&同时处理:hover和:active？
别分开写两遍&:hover和&:active再复制样式，容易漏改或不一致。直接用逗号合并规则块，&会分别拼接到每个伪类前。
例如：
.btn {
background: #007bff;
&:hover, &:active {
background: #0056b3;
transform: translateY(1px);
}
}
编译后是.btn:hover, .btn:active，语义清晰、维护成本低。
- 多个伪类用逗号分隔，不要用空格或
&:hover &:active（这会变成后代嵌套） - 如果
:hover和:active样式差异大，就分开写；但只要共用部分多，优先合并 - 移动端要注意
:active可能不触发（尤其iOS Safari），得配合touchstart等JS补救，这不是Less能解决的
嵌套结构中&怎么绑定到外层父选择器？
比如你写的是.card { .header { &:hover { ... } } }，这里的&指向的是.header，不是.card。想让hover作用在.card上，就得把&:hover提到.card层级。
常见误写：
.card {
&.is-active {
background: #f8f9fa;
}
.header {
color: #333;
&:hover { /* 这个&是.header，不是.card */
color: #007bff;
}
}
}
如果你真需要.card.is-active .header:hover这种组合，就得显式写出完整路径，&帮不上忙。
-
&永远只代表**紧邻上一级**的选择器，不会跨层“穿透” - 想复用外层类名又不想重复写，可以用变量提前存：
@parent: .card;，然后@{parent}.is-active .header:hover - 嵌套三层以上时，建议拆开写，否则可读性急剧下降，也容易搞错
&到底指谁
为什么&:focus没生效，或者和其他伪类冲突？
CSS伪类是有顺序要求的，特别是:link/:visited/:hover/:active（LVHA），但:focus不在这个序列里，它和:hover可以共存，但浏览器渲染优先级取决于具体写法。
Less本身不干预顺序，但你手写的顺序会影响最终CSS权重和覆盖逻辑。
- 别把
&:focus写在&:hover前面，除非你明确要让它被hover覆盖 -
&:hover, &:focus是安全写法，两者并列，互不干扰 - 如果用了
!important强行提权，后续维护会很痛苦；优先靠选择器 specificity 或顺序控制 - 注意
:focus-visible正在逐步替代:focus用于键盘用户，但Less里一样写&:focus-visible即可，无特殊限制
最易被忽略的一点：&只是编译期占位符，它不感知DOM状态变化。给元素动态加class不会让已编译好的&:hover规则“自动适配”新上下文——它只忠实地展开成静态CSS选择器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
