less中伪类选择器写法与原生css一致，必须用&显式连接父选择器（如&:hover），否则默认为后代选择器；支持:not()等现代伪类及属性选择器混用，但需注意优先级与浏览器兼容性。
伪类选择器在Less中写法和原生CSS完全一致
Less 不会对伪类选择器（如 :hover、:focus、:nth-child()）做特殊解析或转义，它只是将它们原样输出到编译后的 CSS 中。这意味着你不需要加引号、不需要额外语法包裹，直接写就行——但必须注意嵌套层级和作用域是否符合预期。
常见错误是把伪类写在错误的嵌套位置，比如：
.btn {
color: blue;
:hover { color: red; } // ❌ 错误：这会编译成 .btn :hover（后代选择器），不是 .btn:hover
}
正确写法是用 & 连接父选择器：
.btn {
color: blue;
&:hover { color: red; } // ✅ 编译为 .btn:hover
&:disabled { opacity: 0.5; }
}
-
&是 Less 的父引用符号，必须显式使用才能生成复合选择器 - 不写
&就默认是空格分隔，变成后代选择器 - 多个伪类连续使用（如
&:hover:focus）也完全合法
嵌套多层伪类时容易漏掉 & 或顺序错乱
像 :not() 套 :hover，或 :is() 内部组合，很容易因嵌套缩进产生歧义。Less 不校验伪类逻辑，只拼字符串，所以编译结果可能和你设想的不一致。
例如想写「按钮不在禁用状态下才响应 hover」：
.btn {
&:not(:disabled):hover { background: #eee; } // ✅ 正确意图
:not(:disabled):hover { background: #eee; } // ❌ 编译为 .btn :not(:disabled):hover（后代）
}
- 所有需要紧贴父选择器的伪类组合，开头都必须带
& -
:not()、:is()、:where()等现代伪类，只要浏览器支持，Less 就照常输出 - 如果目标环境要兼容 IE，避免在 Less 里写
:focus-visible这类新伪类，否则编译虽成功，运行时无效
用变量或混合（mixin）封装常用伪类组合
重复写 &:hover、&:active、&:focus 很枯燥，也容易漏掉 &。用 mixin 抽取能提升可维护性，但要注意参数传递是否覆盖了伪类本身的需求。
比如这个常见 mixin：
.interactive-states(@color: #007bff) {
&:hover { color: shade(@color, 20%); }
&:active { color: darken(@color, 10%); }
&:focus { outline: 2px solid tint(@color, 80%); }
}
.btn-primary { .interactive-states(#0056b3); }
- mixins 里用
&是安全的，它始终指向调用它的选择器 - 避免在 mixin 参数里传入伪类名（如
@state: hover），然后拼成&:@{state}—— Less 不支持动态伪类，会编译失败或出错 - 如果项目大量用到
:visited，注意它只支持有限样式（color、background-color 等），Less 无法帮你规避这个限制
伪类 + 属性选择器混用时注意空格和优先级
像 [disabled]:hover 或 input[type="text"]:focus 这类组合，在 Less 中写起来很直白，但容易忽略 CSS 优先级变化带来的覆盖问题。
示例：
input {
border: 1px solid #ccc;
&[type="password"]:focus { border-color: #007bff; } // ✅ 高优先级，能覆盖上面的 border
[type="password"]:focus { border-color: #007bff; } // ❌ 编译为 input [type="password"]:focus，优先级反而更低
}
- 属性选择器前加
&才能保持与基础选择器同级 - 伪类和属性选择器顺序不影响编译，但影响可读性；建议统一写成
&[attr]:pseudo格式 - 某些伪类（如
:has()）目前仅部分浏览器支持，Less 会照常输出，但别指望它能在旧版 Safari 生效
& 的存在感——它不显眼，但缺了就彻底改变选择器含义。写完记得看一眼编译结果，比靠记忆更可靠。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
