Less开发中如何正确处理CSS伪类选择器？

&必须紧贴伪类，空格会导致编译为后代选择器或无效选择器；伪类嵌套必须用&显式拼接，单独写: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）不会被继承，样式失效时很难一眼定位问题所在。