&是less中父选择器的编译期字符串引用，必须紧贴伪类（如&:hover）才能正确拼接；空格会导致其变为后代选择器（如& :hover→.btn :hover），语义错误且失效。
&不是“更灵活”，而是唯一能正确生成伪类选择器的机制；它本质是编译期字符串拼接，不是运行时变量，用错空格就彻底失效。
为什么&后面多一个空格就编译成后代选择器
&在Less里不是变量，而是当前选择器的完整前缀字符串。它必须紧贴后续内容（比如:hover）才能触发拼接逻辑。一旦中间出现空格，Less就把它识别为“父选择器 + 后代关系符”。
-
& :hover→ 编译为.btn :hover（后代选择器，无效） -
&:hover→ 编译为.btn:hover（正确） -
&:hover:active→ 编译为.btn:hover:active（合法伪类链） -
&:hover :active→ 编译为.btn:hover :active（语义错误，:active不能作用于子元素）
&在:not()里怎么用才不翻车
&可以出现在:not()外部，也可以嵌在括号内，但位置决定语义是否正确。它不能用于括号内部作为子选择器占位符。
-
&:not(:disabled):hover✅ 正确：元素自身未禁用且悬停 -
&:hover:not(:disabled)✅ 等价，顺序不影响编译结果 -
&:not(:disabled) :hover❌ 错：空格导致变成“未禁用的父元素内部的:hover子元素” -
&:not(&:disabled)❌ 非法：&不能出现在:not()括号内
BEM修饰符+伪类组合时&容易漏掉连接符
写.btn--primary这类修饰符时，&必须紧跟父名后加--，中间不能有空格；否则要么报错，要么产出错误结构。
-
.btn { &--primary { } }✅ →.btn--primary -
.btn { & --primary { } }❌ → 编译失败或静默忽略 -
.btn { &:hover--primary { } }❌ → 浏览器不识别:hover--primary - 当父选择器本身已含修饰符（如
.card--compact），再用&__body会生成.card--compact__body，违反BEM规范，应改用.card--compact .card__body
多个伪类共用同一组样式时，为什么必须用逗号分隔
多个伪类共用同一组样式时，用逗号分隔是最简洁、最安全的方式。&会分别拼接到每个伪类前，生成符合CSS规范的并列选择器。
-
&:hover, &:focus→ 编译为.input:hover, .input:focus -
&:hover &:focus❌ → 编译为.input:hover .input:focus（后代选择器，语义错误） -
&:hover &:focus❌ → 同样是后代，且第二个&被当作独立选择器展开 - IE8不支持逗号分隔的多伪类，老项目需确认兼容性目标
真正容易被忽略的是：&没有层级跳转能力，它只绑定当前嵌套层级的父选择器；你以为它能“回到上两级”，其实它只是把外层所有嵌套拼起来——这既是能力，也是陷阱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
