Less中&是父选择器引用，必须位于嵌套规则开头或中间；正确用法如.card { &:hover &__title { color: #007bff; } }编译为.card:hover .card__title，空格决定后代关系，误写会导致选择器错误。
Less中&父选择器的基本用法
Less的&不是符号运算符，而是对当前选择器上下文的显式引用。它必须出现在嵌套规则的开头或中间，不能单独存在。常见误写如&:hover放在子选择器里（比如.btn { span { &:hover {} } }）会导致编译出.btn span:hover，这其实没用到父级上下文——真正需要的是让span继承.btn的hover状态，就得把&拉到外层。
实现「父元素hover时子元素样式变化」的正确写法
想让鼠标悬停在.card上时，内部的.card__title变色，不能靠CSS原生的:hover穿透（浏览器不支持），必须靠Less提前生成组合选择器。关键在于把&和子选择器拼在一起，形成新选择器：
.card {
&__title {
color: #333;
}
&:hover &__title {
color: #007bff;
}
}
编译后是.card__title和.card:hover .card__title，符合BEM且语义清晰。注意：&:hover &__title中间有空格，表示后代关系；若写成&:hover&__title（无空格）则变成.card:hover__title，完全错误。
避免嵌套过深导致选择器爆炸
用&容易无意识写出四层嵌套，比如.modal { .header { .title { &:hover { ... } } } }，编译后是.modal .header .title:hover，权重高、难覆盖、影响性能。实际应优先提取复用结构：
- 把
.modal__header__title改为.modal__title，用BEM修饰符代替深层嵌套 - hover交互逻辑尽量收口到最外层容器，用
&:hover &__xxx控制内部，而非在子元素里反复用& - 超过三层嵌套时，检查是否真需要CSS耦合——有时JS加class更可控
与伪类、伪元素混用时的注意事项
&可以和::before、:focus等组合，但顺序和空格决定含义。例如：
.input {
&:focus {
outline: 2px solid blue;
}
&::placeholder {
color: #999;
}
&:hover &::after {
content: "→";
}
}
这里&:hover &::after编译为.input:hover .input::after，注意是后代伪元素，不是自身伪元素。如果想控制自身::after，应写&:hover::after（无空格）。漏掉空格或错放位置，生成的选择器会完全偏离预期。
复杂交互里&只是语法糖，它不改变CSS层叠逻辑。hover效果是否生效，最终取决于HTML结构是否真能匹配生成的选择器——这点最容易被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
