LVHA顺序是浏览器硬性规则：link→visited→hover→active，顺序错则伪类失效而非覆盖；visited必须紧接link后且仅支持有限样式，focus应置于hover后、active前。
LVHA顺序不是“推荐”，是浏览器匹配逻辑硬性要求
浏览器解析 a:link、a:visited、a:hover、a:active 时，并不把它们当普通样式规则处理——它在**状态判断阶段就依赖这个顺序做互斥决策**。比如，一个链接已访问，浏览器先看是否匹配 a:link，再看是否匹配 a:visited；如果 a:visited 没紧跟在 a:link 后面，某些旧引擎（尤其 IE 兼容模式或 Safari 14 及更早）会直接跳过 a:visited 的匹配流程，导致该规则压根不参与计算。
这不是“样式被覆盖”，而是“规则被忽略”。你加 !important 或调高特异性都没用，因为浏览器根本没把它当作有效选择器。
a:visited:hover 为什么恒不生效
这个写法看似合理，实则违反状态逻辑： :visited 是基于历史记录的静态判定，:hover 是实时交互触发的动态状态，二者无法共存。浏览器将 a:visited:hover 解析为「既已被访问、又正在悬停」，这是一个恒假命题，整条规则直接被丢弃——DevTools 的 Styles 面板里都看不到它。
- 错误写法：
a:visited:hover、a:hover:visited、button:disabled:hover - 正确做法：拆成独立规则，
a:visited { color: purple; }和a:hover { color: blue; }分开声明，且确保:visited紧跟:link - 移动端无 hover，但
:visited依然生效，所以别指望靠 hover 覆盖 visited 样式
为什么 :visited 只能设极少数样式
这是隐私保护机制，不是 CSS 限制。现代浏览器（Chrome 15+、Firefox 4+、Safari 12.1+）强制静默丢弃所有可能泄露用户浏览历史的声明，例如：
立即学习“前端免费学习笔记（深入）”；
-
a:visited { background-image: url(...); }→ 被忽略 -
a:visited { font-weight: bold; }→ 被忽略 -
a:visited { transform: scale(1.1); }→ 被忽略 - 仅允许：
color、background-color、border-color、outline-color、text-decoration-color等少数几个属性
即使你按 LVHA 顺序写了，这些非法声明也不会报错，只会消失得无声无息——这是调试时最容易漏掉的点。
加了 :focus 或 :disabled 后，LVHA 还管用吗
LVHA 只约束 :link/:visited/:hover/:active 四者之间的相对位置，其他伪类不参与这个链条。但混用时必须注意新规则：
-
:disabled、:read-only、:checked属于“状态类”，必须放在最左侧，例如input:disabled:focus是错的，应拆成input:disabled和input:focus两条独立规则 -
:focus建议放在:hover后、:active前，形成link → visited → hover → focus → active，否则键盘 Tab 切换时可能跳过焦点样式 - 注释、空行、@media 嵌套中穿插其他规则，都可能导致旧引擎解析异常——LVHA 要求的是**连续紧邻的声明顺序**，中间不能有别的选择器打断
真正难的不是记住顺序，而是理解：顺序错，不是样式弱，是规则失效；而失效时浏览器连 warning 都不给——你得靠 DevTools 的 “Force element state” 功能去验证它到底有没有被识别。
