less中&:hover后多空格会编译为后代选择器导致伪类失效，正确写法是&:hover无空格；多伪类需用逗号分隔，如&:hover, &:focus；&不可放入:not()等函数内，且vscode语言模式错误也会误报语法。
&后面多了一个空格，伪类就失效了
Less里写&:hover没问题，但& :hover（&后带空格）会被编译成后代选择器，不是你想要的按钮自身状态。这种错误不报错，但样式根本不会生效——你调了半天颜色，发现:hover始终没反应，大概率是这里卡住了。
常见场景：
- 手误多敲一个空格，尤其在快速复制粘贴或自动补全后
- 编辑器自动格式化把
&和:hover拆到两行，中间留了空格 - 用AI生成代码时，输出带空格的
& :active，直接失效
检查方法：编译后看CSS输出。如果看到.btn :hover（带空格），说明错了；正确应是.btn:hover（无空格）。
多个伪类连写必须用逗号，不能靠空格
想让.input同时响应:hover和:focus，得写&:hover, &:focus。写成&:hover &:focus（中间空格）会变成“hover状态下的focus元素”，语义完全跑偏。
注意点：
- 逗号前后可以有空格，但
&和冒号之间绝不能有空格 - IE8不支持逗号分隔的多伪类，老项目要拆开单独写
- 如果伪类里还要嵌套子元素，
&只绑定当前层级父选择器，别指望它“穿透”到外层
&不能放进:not()括号里
&:not(:disabled)合法，但:not(&:disabled)会报parse error——Less不认这种写法。&只能当占位符放在伪类前面，不能塞进CSS函数参数里。
替代方案：
- 提前用变量存父选择器名，比如
@parent: ".btn";，再写@{parent}:not(:disabled) - 放弃
&，手写完整选择器：.btn:not(:disabled) - 用mixin封装逻辑，避免在复杂伪类里硬套
&
VSCode语言模式错，也会报伪类语法红
你在.vue文件里写&:hover，右下角语言模式却显示HTML，VSCode就会按HTML规则校验Less语法，立刻标红。这不是Less错，是编辑器没认对语言。
解决步骤：
- 点击VSCode右下角语言标识（如“HTML”）
- 选“Configure Language Mode” → 找到
Vue或Less - 如果是单文件组件，选
Vue；如果是独立.less文件，选Less - 确认
lang="less"已写在<style></style>标签上
真正容易被忽略的是：&本身不参与运行时计算，它只是编译期占位符；伪类失效往往静默发生，没有错误提示，只能靠比对编译后的CSS来确认。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
