伪类顺序错乱是书写逻辑错误而非编译问题；less仅字符串拼接，不校验伪类顺序；a:visited:hover等恒假选择器被浏览器直接忽略；&后空格导致语义错误；多伪类须逗号分隔；:not()中&位置错误会破坏匹配逻辑。
伪类顺序错乱不是编译问题，而是书写逻辑错误
Less 编译器完全不干预伪类的书写顺序，它只做字符串拼接和变量替换。所谓“顺序错乱”，实际是你在 Less 源码里把伪类写成了浏览器无法匹配的组合，比如 a:visited:hover 或 button:disabled:hover——这类选择器在 CSS 规范中恒假，浏览器直接跳过整条规则，根本不会进入层叠计算环节。
& 后多一个空格就让伪类变成后代选择器
这是最隐蔽也最高频的坑：& 是紧贴父选择器的字符串占位符，它后面加不加空格，直接决定输出语义。
-
&:hover→ 编译为.btn:hover（正确） -
& :hover→ 编译为.btn :hover（匹配 .btn 内部任意悬停元素，非按钮自身） -
&: hover→ 编译为.btn: hover（语法错误，CSS 解析失败）
所有伪类、伪元素都必须紧贴 &，中间不能有空格、换行或零宽字符。VS Code 建议开启“显示控制字符”功能，全局搜索 \u200B 等隐藏符号。
多个伪类共用样式必须用逗号分隔，不能靠嵌套
想让 :hover、:focus、:active 共享同一组声明，必须显式写成逗号分隔形式：
- ✅
&:hover, &:focus, &:active { opacity: 0.8; }→ 输出.input:hover, .input:focus, .input:active - ❌
&:hover { &:focus { ... } }→ 输出.input:hover .input:focus（后代，语义错误） - ❌
&:hover &:focus→ 同样是后代，且无实际用途
注意：IE8 不支持逗号分隔的多伪类选择器，如需兼容，得拆成独立规则或用 JS 模拟。
:not() 里 & 的位置稍有偏差就会翻车
& 可以出现在 :not() 外部或括号前，但绝不能插进括号中间：
- ✅
&:not(:disabled):hover→ 元素未禁用且悬停 - ✅
&:hover:not(:disabled)→ 等价，顺序不影响匹配逻辑 - ❌
&:not(:disabled) :hover→ 变成“未禁用的父元素里的 :hover 子元素” - ❌
&:not(&:disabled)→ 语法非法，Less 编译报错
真正难调试的是当 & 套在媒体查询或 mixin 里时，它只绑定字面最近的父选择器；动态添加的 class（如 theme-dark）不会被继承，样式失效时很难一眼定位到是 & 绑定层级错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
