&是Less中代表当前选择器上一级的编译时占位符，仅在嵌套选择器中生效且须位于开头；不可用于属性值或{}内部，多&可连用生成复合选择器，伪类组合需分层嵌套，&始终绑定最近父级，不支持修饰媒体查询，动态伪类链需手动处理。
Less中&父选择器的基本用法
Less的&不是变量，也不是运算符，它代表“当前选择器的上一级”，本质是编译时的占位符。很多人误以为它能拼接任意字符串，其实它只在嵌套规则中生效，且必须出现在选择器开头或紧邻选择器的位置。
常见错误：在属性值里写&:hover——这会原样输出，不会解析为父级拼接；或者把&放在伪类中间，比如div &::before，这会导致编译失败或语义错乱。
-
&只能用于选择器上下文中，不能出现在{}块内部 - 多个
&可连续使用，如& &::before生成.btn .btn::before - 与伪类组合时，
&:hover、&::before、&[disabled]都合法；但& :hover（带空格）会变成后代选择器，不是父级自身状态
用&生成多层嵌套伪类组合
要生成像.card:hover .card__header::after这种带层级+状态+伪元素的复合选择器，关键在于分层嵌套，而不是堆砌&。Less不支持单行展开所有层级，必须靠嵌套结构驱动编译。
例如想让.btn在禁用+悬停时变灰，同时其子.btn__icon加动画暂停：
.btn {
&.is-disabled {
&:hover {
color: #999;
.btn__icon {
animation-play-state: paused;
}
}
}
}
编译结果是.btn.is-disabled:hover和.btn.is-disabled:hover .btn__icon，而非.btn .btn.is-disabled:hover——因为&始终绑定最近的父级。
避免&与属性选择器、媒体查询混用出错
当&遇上[attr]或@media，容易产生意料外的选择器顺序。Less按嵌套顺序拼接，但CSS优先级和匹配逻辑不会因此改变。
-
&[data-loading="true"]→.spinner[data-loading="true"]✔️ -
&:not([disabled])→.input:not([disabled])✔️ - 但在
@media (min-width: 768px)内写&:hover，会生成@media (min-width: 768px) {.input:hover {...}}，这是安全的；但如果写成@media (min-width: 768px) { & { ... } }，则&仍指向外部父选择器，不是媒体查询本身 - 错误写法：
& @media {...}—— Less不支持&直接修饰媒体查询，会报错
生成动态伪类链（如:is()或:where()）需手动拼接
Less不解析CSS新伪类的内部逻辑，&:is(:hover, :focus)会被原样输出，但浏览器可能不支持旧版Less编译器对:is()的识别。稳妥做法是显式列出：
.control {
&,
&:hover,
&:focus,
&:active {
outline: 2px solid blue;
}
}
如果目标环境支持现代CSS且你用的是较新Less（v4.0+），&:is(:hover, :focus)能通过，但要注意：编译后仍是.control:is(:hover, :focus)，无法进一步展开为独立规则，也无法被autoprefixer降级。
真正容易被忽略的是：伪类顺序影响层叠。比如&:hover:focus和&:focus:hover在语义上等价，但CSS引擎按书写顺序匹配，某些极端场景下（如JS动态切换状态）可能有微小差异。别依赖&自动优化顺序——你写的顺序就是最终顺序。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
