lvha顺序是浏览器状态匹配的硬性规则：:link必须在:visited前，二者互斥；:hover和:active为叠加态，应紧随其后；:focus需并列补充于:hover后、:active前；:visited仅支持极少数属性，其他声明被静默丢弃。
顺序错，:visited 就可能压根不参与样式计算，已访问链接的 :hover 和 :active 会直接失效——这不是兼容性问题，是浏览器解析逻辑决定的硬性规则。
浏览器按声明顺序做状态匹配，不是单纯层叠
:link 和 :visited 是互斥基础状态，浏览器在匹配阶段就依赖这个顺序判断“该用哪个”；而 :hover 和 :active 是叠加态，可以同时作用于未访问或已访问链接。如果把 :hover 写在 :visited 前面，已访问链接悬停时会先匹配 :hover，但紧接着被后面同权值的 :visited 覆盖（比如 color），结果就是颜色不变、下划线不出现。
常见错误现象：
-
a:hover { color: red; }放在a:visited上方 → 已访问链接悬停无反应 - 只写
:hover和:active，漏掉:link→ 未访问链接回退浏览器默认蓝色，视觉断裂 - 在
:link和:visited中间插注释或其它规则 → 某些旧引擎解析异常，:visited被跳过
:visited 的样式能力被浏览器主动阉割
现代浏览器为防隐私泄露，只允许 :visited 设置极少数属性：color（不支持 rgba()）、background-color（部分已禁用）、border-color、outline-color，以及几个 text- 开头的属性（如 text-decoration-color）。
以下写法会被静默丢弃，且不报错：
a:visited { font-weight: bold; }a:visited { background-image: url(...); }a:visited { transform: scale(0.95); }a:visited { transition: color 0.2s; }
:focus 要补，但不能打乱 LVHA 主干
键盘用户靠 Tab 切换焦点，触摸设备不触发 :hover，所以常需补充 :focus。但它不是 LVHA 的一部分，必须作为并列补充插入：
- 正确位置：紧接
:hover后、:active前 - 写法推荐：
a:hover, a:focus { ... }（避免重复声明） - 绝对不能：
a:link和a:visited中间插:focus，否则破坏互斥状态链 - 别用
!important强行调换顺序，它会让:active失效——因为:active也得靠顺序赢过:hover
真正容易被忽略的是：这个顺序不是为了“让样式好看”，而是浏览器内部状态匹配流程决定的。哪怕你只用其中两个伪类，比如只写 :link 和 :hover，也得把 :link 放前面；一旦加了 :visited，就必须立刻跟在 :link 后面——中间不能有任何东西，包括空行和注释。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
