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

&必须紧贴父选择器末尾无空格，否则编译为后代选择器而非自身伪类；多伪类用逗号分隔，不可空格连接；&不能用于:not()括号内，仅作父选择器占位符。

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才是最省时间的做法。