必须按LVHA顺序（:link→:visited→:hover→:active）书写，因浏览器按声明顺序覆盖样式，否则:hover会覆盖:visited导致已访问链接样式失效；:focus应插在:hover后、:active前形成LVHFA以兼顾键盘操作。
为什么 :link 和 :visited 必须写在 :hover 前面
因为 CSS 伪类的层叠顺序直接影响样式是否生效——浏览器按声明顺序覆盖，而 :hover 和 :active 在用户交互时会同时满足多个状态（比如鼠标悬停在一个已访问过的链接上），此时若 :visited 写在 :hover 后面，它的样式会被后者无条件覆盖，导致“已访问”状态失效。
实际中常见错误是把所有状态按“视觉效果优先”乱排，结果 :visited 看不见、:active 按不下去。
a 标签四大状态的标准书写顺序
必须严格按 LVHA 规则（Link → Visited → Hover → Active）书写，这是 W3C 明确推荐且被所有现代浏览器遵循的实践：
-
:link：仅对未访问的链接生效，必须放在最前 -
:visited：仅对已访问的链接生效，不能设置 color 以外的多数属性（安全限制），紧随:link -
:hover：鼠标悬停时触发，可覆盖前两者，但不能影响:visited的基础颜色逻辑 -
:active：鼠标按下瞬间触发，应放在最后，否则可能被:hover覆盖（尤其在快速点击时）
示例：
立即学习“前端免费学习笔记（深入）”；
code>a:link { color: #0066cc; }
a:visited { color: #663399; }
a:hover { color: #ff6600; text-decoration: underline; }
a:active { color: #cc0000; }
为什么 :focus 通常要加在 :hover 后、:active 前
键盘操作（Tab 切换）和鼠标操作的交互路径不同：:focus 是焦点状态，常与 :hover 并存（比如鼠标悬停后用 Tab 进入），但它不应覆盖 :active 的按下反馈。所以常见增强顺序是 LVHFA：
- 保持
:link和:visited不动 - 把
:focus插在:hover之后、:active之前，确保聚焦时有明确视觉提示 - 注意：若用
outline实现焦点样式，记得在:focus中重置outline: none以外的其他样式，避免与:hover冲突
错误写法：a:focus { outline: 2px solid blue; } 单独写没问题，但如果它出现在 :hover 前，且两者都改了 color，就可能被后者覆盖。
移动端和无障碍场景下容易忽略的点
触摸设备没有持续 :hover，但 Safari/iOS WebKit 仍会短暂触发；更关键的是，屏幕阅读器依赖 :focus 和语义结构，而很多开发者只写 :hover 就以为“交互态”完整了。
- 不要用
:hover做唯一交互反馈，必须搭配:focus和/或:focus-visible -
:visited在 Chrome 80+ 和 Firefox 中受隐私限制，无法通过 JS 获取，CSS 里也禁止设置background、font等敏感属性——别试图绕过，它本就不该承载复杂样式 - 如果用了 CSS-in-JS 或原子化工具（如 Tailwind），检查生成顺序是否隐式破坏 LVHA；Tailwind 默认按源码顺序输出，需手动控制 class 书写次序
真正难的不是记住顺序，而是当团队协作、多层封装、动态 class 注入时，没人再回头看那几行基础 CSS —— 最终出问题的，往往是最早被删掉的 :visited 声明。
