&必须紧贴伪类，空格会导致编译为后代选择器或无效选择器；伪类嵌套必须用&显式拼接，单独写:hover会被编译为无主选择器而被浏览器忽略；多个伪类共用样式须用逗号分隔，&:hover, &:focus生成合法并列选择器，而空格连接则语义错误。
& 必须紧贴伪类，空格会导致语义错误——这是绝大多数样式不生效的根源。
伪类嵌套必须用 & 显式拼接
Less 不会自动把父选择器挂到 :hover、:focus 这类伪类前。单独写 :hover 会被编译成全局选择器，浏览器直接忽略。
-
&:hover→ 编译为.btn:hover（正确） -
:hover→ 编译为:hover（无主选择器，无效） -
& :hover→ 编译为.btn :hover（后代选择器，:hover 无法作用于子元素，无效）
多个伪类共用样式时用逗号分隔
想让 :hover、:focus、:active 共享同一组样式，必须用逗号连接，不能靠空格或重复 &。
-
&:hover, &:focus, &:active→ 编译为.input:hover, .input:focus, .input:active -
&:hover &:focus→ 编译为.input:hover .input:focus（后代选择器，语义错误） - IE8 不支持逗号分隔的多伪类，老项目需确认兼容性目标
伪类链和 :not() 里 & 的位置很关键
& 可以出现在 :not() 外部或内部括号前，但绝不能插进括号中间；一个空格就让整个逻辑翻车。
-
&:not(:disabled):hover✅ 元素自身未禁用且悬停 -
&:hover:not(:disabled)✅ 等价，顺序不影响 -
&:not(:disabled) :hover❌ 变成“未禁用父元素内的:hover子元素” -
&:not(&:disabled)❌ 语法非法，&不能出现在:not()括号内
伪元素和 BEM 修饰符拼接容易漏掉连接符
&::after 中间不能有空格，否则变成后代匹配；BEM 修饰符如 --primary 必须紧跟 &，不能加空格或错位。
-
&::after→.icon::after（正确） -
& ::after→.icon ::after（匹配子元素伪元素，通常不是你想要的） -
&--primary→.btn--primary（正确） -
& --primary或&:hover--primary→ 要么报错，要么生成无效 CSS
真正难调试的不是语法本身，而是当 & 套在媒体查询、mixin 或多层嵌套里时，它只绑定字面最近的父选择器——动态添加的 class（比如 theme-dark）不会被继承，样式失效时很难一眼定位问题所在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
