伪类顺序必须遵循LVHA规则（:link→:visited→:hover→:active），否则浏览器可能忽略样式；现代伪类如:focus-within、:has()不受此限，但需注意兼容性与优先级。
伪类顺序写错会导致样式不生效
当多个伪类连用时（比如 :hover、:active、:focus），CSS 解析器会按顺序逐个匹配。如果顺序违反了“LVHA”规则（Link → Visited → Hover → Active），部分浏览器可能忽略整个规则，尤其在旧版 IE 或某些移动端 WebView 中表现明显。
典型现象是：鼠标悬停时没反应，点击后没高亮，表单聚焦时样式丢失——不是代码写错了，而是伪类排列顺序触发了浏览器的兼容性降级或解析跳过。
LVHA 顺序是必须遵守的硬约束
这个顺序源于 CSS2.1 规范对链接状态的定义，虽然后续规范扩展了更多伪类（如 :focus-visible、:has()），但涉及交互状态的常用组合仍需以 LVHA 为基线：
-
:link和:visited必须在最前（且:link在:visited前） -
:hover要在:active前，否则点击瞬间无法触发:active样式 -
:focus通常放在:hover后、:active前，形成 hover → focus → active 的自然流转
错误示例：a:active:hover { color: red; } —— 浏览器直接忽略该规则；正确写法：a:hover:active { color: red; }
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
现代伪类如 :focus-within 和 :has() 不受 LVHA 约束
这些是 CSS Selectors Level 4 引入的结构化伪类，不描述元素的“单一状态”，而是表达“关系”或“嵌套条件”，因此可以自由穿插在 LVHA 链中，但要注意优先级和浏览器支持：
-
:focus-within可放在:hover前或后，取决于你希望聚焦态是否覆盖悬停态 -
:has()目前仅 Chrome 105+ / Safari 15.4+ 支持，且不能出现在选择器开头；若混用，建议单独成规则，避免和 LVHA 链耦合 - 混用时推荐拆开写，例如：
button:hover { … }和button:focus-within { … }分开定义，比button:hover:focus-within更可控
调试伪类失效的三个实操步骤
遇到伪类不生效，别急着重写，先验证是否是顺序或冲突问题：
- 打开 DevTools → Elements 面板，右键目标元素 → “Force element state”，手动触发
:hover、:active等，看样式是否出现 —— 若能强制生效，说明顺序或触发条件有问题 - 在 Styles 面板中检查被划掉的样式，点旁边的小箭头展开“invalid”提示，常会显示 “Invalid selector” 或 “Ignored due to invalid order”
- 把多伪类选择器拆成单伪类逐一测试，例如把
input:focus:valid:hover拆成input:focus、input:valid、input:hover，确认哪些能生效、哪些被跳过
真正容易被忽略的是：伪类顺序问题往往只在特定浏览器或特定用户操作路径下暴露，本地开发看着正常，上线后用户反馈“点不动”“输完没反馈”，其实只是 :focus 被 :hover 错位挡住了。
