&在less中代表父选择器的完整引用，伪类组合必须用&显式连接；空格会改变语义，如&:hover:active正确，&:hover :active则变为无效后代选择器。
Less中&符号怎么正确嵌套伪类选择器
直接说结论：&在Less里不是“拼字符串”，而是代表父选择器的**完整引用**；伪类组合必须用&显式连接，否则编译后会丢失层级关系或生成错误选择器。
比如你想写.btn:hover:active，不能只写:hover:active，否则Less默认把它挂到全局，变成:hover:active（无主选择器），浏览器直接忽略。
-
&:hover→ 编译为.btn:hover -
&:hover:active→ 编译为.btn:hover:active -
&:hover &:focus→ 错！这是两个独立选择器，且第二个&会重复展开为.btn:focus，结果是.btn:hover .btn:focus（带空格，变成后代选择器）
常见伪类组合写法与对应编译结果
伪类顺序、是否带空格、&位置，直接影响最终CSS语义。下面这些是高频场景的实际写法：
-
.link { &:hover { color: blue; } }→.link:hover { color: blue; } -
.input { &:focus:not(:placeholder-shown) { border-color: #007bff; } }→.input:focus:not(:placeholder-shown) { ... } -
.card { &:hover { .card__title { opacity: 1; } } }→.card:hover .card__title { ... }（注意：这里&只作用于当前层级，内部没&就按普通嵌套处理） - 想写
.btn:is(:hover,:focus,:active)？直接写：.btn { &:is(:hover, :focus, :active) { ... } }→ 编译后保留:is()结构（前提是Less版本≥4.0且未启用兼容旧版模式）
容易踩的坑：嵌套+伪类时的空格陷阱
Less对空格极其敏感——一个不小心多打个空格，语义就从“同元素多伪类”变成“后代选择器”。这是最常导致样式不生效的原因。
- ✅ 正确：
&:hover:active（紧贴，无空格）→ 同元素上同时满足两个伪类 - ❌ 错误：
&:hover :active（:hover后面有空格）→ 编译为.btn:hover :active，即“.btn:hover内部任意有:active状态的元素”，但:active不能作用于子元素，实际无效 - ❌ 错误：
& :hover（&后有空格）→ 编译为.btn :hover，变成后代选择器，同样无意义 - ⚠️ 特别注意
:not()内嵌伪类：&:not(:disabled):hover是对的；但写成&:not(:disabled) :hover就完全变味了
复杂伪类链建议拆开写，别硬塞进一层嵌套
像.item:nth-child(odd):not(.disabled):hover > .item__content这种长链，强行用&嵌套易出错、难维护。不如分层控制：
.item {
&:nth-child(odd) {
&:not(.disabled) {
&:hover {
> .item__content {
color: red;
}
}
}
}
}
虽然编译后选择器略长，但逻辑清晰、调试方便。Less本身不优化选择器长度，过度压缩嵌套反而增加维护成本。真正影响性能的是CSS规则匹配深度和重绘范围，不是源码嵌套层数。
另外，如果项目要兼容IE，记得避开:is()、:where()、:has()等新伪类——Less能编译，但浏览器不认。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
