伪类嵌套顺序错误在less中不报编译错误但会导致css失效，根本原因是&展开后生成的选择器违反lvha规则（如a:active:hover被浏览器忽略）或伪类脱离目标元素（如&:focus:invalid编译为无元素名的:focus:invalid而被丢弃）。
伪类嵌套顺序错误在 Less 中不会报编译错误，但会导致最终 CSS 失效或行为异常——根本原因是 & 展开后生成的选择器违反了浏览器对伪类顺序的解析规则（LVHA），或者拼接逻辑出错让伪类脱离目标元素。
为什么 &:hover:active 有时不生效
Less 编译本身不校验伪类顺序，但浏览器会按规范拒绝非法组合。比如 a:hover:active 合法，a:active:hover 则被直接忽略。而当你写成：
.btn {
&:hover:active {
background: #e0e0e0;
}
}
Less 会正确输出 .btn:hover:active，看起来没问题；但若父选择器本身已含状态类，例如：
.card.is-active {
&:hover {
opacity: 0.8;
}
}
结果是 .card.is-active:hover，权重升为 0-2-1，且语义模糊——你本意可能是“卡片处于 active 状态时 hover”，但实际匹配的是“同时拥有两个类的元素 hover”。
- 伪类必须紧贴元素选择器，不能被中间插入的类名/属性打断
-
&只展开上一级，不会跳过.is-active去绑定到.card - 想表达“active 状态下的 hover”，应改用工具类：
.card--active:hover或拆成两层独立规则
&:focus:invalid 在 Less 中为何编译后无效
常见写法：.form-group input { &:focus:invalid { border-color: red; } }，看似合理，但编译后是 .form-group input:focus:invalid，层级加深、权重升高，极易被第三方组件样式覆盖。
- 真正起作用的是浏览器对
:focus:invalid的支持，而非 Less 写法本身 - 旧版 Safari 不支持
:focus:invalid连用，需降级为:user-invalid或 JS 控制类 - 更稳的写法是收束到单个语义选择器：
input[required]:focus:invalid，避免嵌套带来的权重和可维护性问题 - 别在 mixin 外层或变量块里写
&:focus:invalid——&没有绑定目标，编译后变成:focus:invalid（无元素名），浏览器直接丢弃
媒体查询内嵌套伪类导致选择器爆炸
@media 块里继续用 &:hover，& 会展开全部外层路径。例如：
.dashboard {
.card {
.header__title {
@media (min-width: 768px) {
&:hover {
color: blue;
}
}
}
}
}
编译后是 @media (min-width: 768px) { .dashboard .card .header__title:hover { } }，6 层选择器，体积大、难调试、HTML 结构一动就断。
- 响应式交互样式必须抽到顶层，用媒体查询包裹完整语义类：
@media (min-width: 768px) { .header__title:hover { } } - 如果需要区分不同上下文，用 BEM Modifier：
.header__title--interactive:hover，而不是靠嵌套路径识别 -
@at-root是唯一安全的抽离方式：@at-root (with: all) { @media (min-width: 768px) { #{&}:hover { } } }，但需手动补全选择器，不如直接写顶层
Stylelint 怎么检查并修复伪类顺序
Stylelint 默认不识别 Less 嵌套语法，selector-pseudo-class-order 规则对 &:hover:active 完全不触发——它只检查最终 CSS 输出，而 Less 编译阶段的拼接错误已经固化。
- 必须配置
customSyntax: "postcss-less"，否则所有嵌套相关规则都失效 -
scss/selector-nest-limit和selector-pseudo-class-order本身不可自动修复，VS Code 保存时只会提示，不会重排 - 真正能落地的检查点只有两个：
selector-max-specificity（防权重失控）和selector-no-qualifying-elements（禁用div:hover类写法） - 全量修复要靠 CLI：
npx stylelint "**/*.less" --fix，但仅限格式类规则；伪类顺序仍需人工核对
最易被忽略的点：伪类顺序问题从来不是 Less 语法问题，而是 HTML 结构 + CSS 规范 + 浏览器实现三者交叠的结果。写 &:hover 很快，但想清楚“这个 hover 到底该绑定在哪个元素上”才真正决定它是否生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
