伪类顺序错误导致选择器不匹配而非样式覆盖；正确顺序应为状态类（:disabled、:checked）在前，交互类（:hover、:focus）在后，LVHA顺序是硬约束，否则浏览器直接跳过整条规则。
伪类顺序错导致选择器根本匹配不上
不是样式被覆盖，而是浏览器压根不认为这个选择器成立。比如 button:disabled:hover，禁用状态下的按钮无法触发 :hover，整个选择器逻辑为假，整条规则直接跳过——它连“尝试应用样式”的机会都没有。
常见错误写法和对应问题：
-
a:hover:visited❌ 语义矛盾：链接不可能同时是“悬停中”又“已被访问”，浏览器忽略整条规则 -
input:focus:hover❌ 实际极少触发（需先聚焦再悬停），可读性差，旧版 Safari 可能解析失败 -
button:hover:disabled❌ 把交互态放状态态前面，逻辑上不可达
LVHA 顺序是浏览器解析逻辑的硬约束
:link、:visited、:hover、:active 这四个伪类必须按这个顺序写，否则 :hover 样式可能被前面的 :link 或后面的 :active 意外压制——不是优先级问题，是 CSS 引擎在匹配时按顺序“短路”判断。
例如：
/* 错误：hover 写在 link 前面 */
a:hover { color: red; }
a:link { color: blue; } /* 这条会覆盖 hover，因为 link 规则后声明但特异性相同 */
<p>/<em> 正确：严格 LVHA </em>/
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: darkred; }</p>
状态类必须前置，交互类必须后置
所有表示元素固有状态的伪类（如 :disabled、:checked、:read-only）都要放在 :hover、:focus、:active 前面。这是为了确保浏览器先确认“这个元素当前是否允许交互”，再决定“它能否响应悬停”。
正确组合方式：
-
button:not(:disabled):hover✅ 先排除禁用态，再看是否悬停 -
input[type="checkbox"]:checked + label:hover✅ 状态明确，交互边界清晰 -
select:focus-visible:hover❌:focus-visible应紧接:focus，不能夹在中间
移动端和触摸设备让顺序问题更隐蔽
iOS Safari 和部分安卓 WebView 在首次触摸前不会激活 :hover，但一旦激活，后续 :hover 行为就依赖你写的伪类是否“可被缓存”。如果顺序混乱（比如 :hover:focus），某些引擎会拒绝缓存该规则，导致悬停效果断续或完全失效。
真正难调试的点在于：你在桌面 Chrome 里看着好好的，一到真机上就失效——往往不是媒体查询漏了，而是伪类顺序让浏览器在 touch-capable 环境下放弃了整条规则的预编译。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
