Less处理CSS伪类状态样式：利用&连接符精准定位

Less 中 & 连接符如何精准定位父选择器并处理伪类样式

Less 里 & 怎么写伪类才不会漏掉父选择器

直接说结论：& 必须紧贴父选择器末尾，中间不能有空格，否则编译后伪类会脱离上下文、变成全局样式。这是最常踩的坑。

比如你写：

.btn {  color: #333;  &:hover { color: #007bff; }}

编译后是 .btn:hover，没问题；但如果你手抖多打了个空格：

.btn {  color: #333;  & :hover { color: #007bff; } // 注意 & 后面多了个空格}

编译结果就变成 .btn :hover（带空格），意味着“.btn 内部任意元素的 :hover”，完全不是你想要的按钮自身状态。

• & 不是变量，是编译时的父选择器占位符，它不参与运行时计算
• 嵌套多层时，& 始终指代最近一层的父选择器，不是最外层
• 想引用更外层的父选择器？得用 ~"" 或提前用变量存住，& 做不到

多个伪类连用时 & 要不要重复写

不用重复，一次 & 就能串联所有伪类，关键是写法顺序要符合 CSS 原生逻辑。

例如想同时支持 :hover 和 :focus，别这么写：

.input {  border: 1px solid #ccc;  &:hover { border-color: #007bff; }  &:focus { border-color: #28a745; }}

这没问题，但如果你想合并成一个规则块（比如都加 outline），就得用逗号分隔：

.input {  border: 1px solid #ccc;  &:hover,  &:focus { outline: 2px solid rgba(0,123,255,.25); }}

注意：&:hover,&:focus 编译后是 .input:hover,.input:focus，正确；但如果你写成 &:hover &:focus（中间没逗号），就会变成 .input:hover .input:focus，语义全错。

• 逗号分隔的伪类共享同一组声明，适合视觉表现一致的场景
• 需要差异化样式时，必须分开写，避免用 ! 强制覆盖
• IE8 不支持多伪类逗号写法（虽然 Less 能编译，但浏览器不认），老项目需留意

伪类里再嵌套子元素，& 还管用吗

管用，但容易误以为“继承了父级上下文”，其实 & 只绑定当前层级的父选择器。

看这个例子：

.card {  padding: 1rem;  &:hover {    background: #f8f9fa;    .card-title { color: #007bff; } //  正确：.card:hover .card-title  }}

这里 .card-title 前面没加 &，它就是相对 &:hover 作用域的子选择器，编译后是 .card:hover .card-title，符合预期。

但如果你强行加 &：

&:hover {  & .card-title { color: #007bff; } //  编译为 .card:hover .card:hover .card-title}

结果多了一层 .card:hover，样式根本不会生效。

• & 在伪类内部再用，等于把当前伪类选择器重复拼接一遍
• 想选伪类下的子元素，直接写类名就行，不需要 &
• 真要拼复合选择器（比如 .card:hover .card-title.active），用 &.active，不是 & &.active

用 & 处理 :not() 这类函数型伪类要注意什么

:not() 本身是 CSS 函数，Less 不解析它内部逻辑，所以 & 只能放在 :not() 外面，不能插进括号里。

正确写法：

.btn {  &:not(:disabled) { opacity: 1; }  &:not(.is-hidden) { display: block; }}

编译后分别是 .btn:not(:disabled) 和 .btn:not(.is-hidden)，没问题。

错误写法：

&:not(&:disabled) { ... } // Less报错：&不能出现在括号内&:not(.&-disabled) { ... } // 语法错误，&不能参与字符串拼接

想动态生成 :not() 里的类名？得用 replace() 或 e() 函数，& 做不到。

• & 不支持在伪类函数内部使用，这是 Less 语法限制，不是 bug
• :not() 里写多个选择器（如 :not(:disabled, .is-hidden)）要等 CSS 原生支持，Less 只负责原样输出
• 复杂否定逻辑建议拆到 JS 控制类名，比在 Less 里硬凑更可控

事情说清了就结束。真正麻烦的不是 & 怎么写，而是当嵌套超过三层、又混着 :not() 和 &:hover 时，人眼很难一眼看出最终生成的选择器长什么样——这时候别靠猜，编译出来瞄一眼 CSS 才是最省时间的做法。