链接伪类必须按L-V-H-A顺序声明，因浏览器按声明顺序层叠样式，:visited会覆盖前置的:hover等同名属性，且:link与:visited互斥而:hover/:active可叠加其上。
链接的四种伪类必须按 L-V-H-A 顺序声明，否则 :visited 或 :hover 可能不生效。
为什么顺序不能乱：LVHA 是浏览器匹配优先级规则
CSS 伪类的层叠顺序由规范强制约定。浏览器按声明顺序应用样式，而 :link 和 :visited 是互斥状态（一个链接要么未访问过，要么访问过），但 :hover 和 :active 可能叠加在任一基础状态上。如果把 :hover 写在 :visited 前面，已访问链接就无法触发悬停样式——因为 :visited 后续声明会覆盖前面同名属性。
-
:link：仅对未访问的超链接生效（<a href="...">必须有href属性） -
:visited：仅对用户历史中存在该 URL 的链接生效；出于隐私限制，它能设置的样式极少（仅color、background-color、border-color等有限属性） -
:hover：鼠标移入时触发，可作用于任意元素，不限于链接 -
:active：鼠标按下瞬间（非点击后）触发，持续到鼠标释放
正确写法与常见错误对比
下面这段是安全、可预期的写法：
a:link { color: #0066cc; text-decoration: none; }
a:visited { color: #666; }
a:hover { color: #ff6b35; text-decoration: underline; }
a:active { color: #004499; }
这些写法容易出问题：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
- 把
a:hover放在a:visited前面 → 已访问链接悬停无反应 - 只写
a:hover没写a:link→ 未访问链接可能继承父级颜色，导致悬停前后颜色差异不可控 - 给
:visited设置background-image或font-size→ 浏览器直接忽略，不报错也不生效
移动端和键盘用户的兼容注意点
:active 在触摸设备上行为不稳定：部分 Android 浏览器需要额外 CSS 触发“激活态”，iOS Safari 则默认禁用 :active 样式以避免误触。若需确保点击反馈，建议补充：
- 在
<head>中添加<meta name="viewport" content="width=device-width, initial-scale=1"> - 给
a元素加cursor: pointer（提升桌面端识别度） - 必要时用 JavaScript 监听
touchstart/touchend模拟激活态（:active不可靠时的兜底方案）
最常被忽略的是 :visited 的隐私限制——它不是“失效”，而是被浏览器主动阉割了大部分样式能力。别试图用它做视觉区分以外的事，比如显示图标或改变布局，那注定不会如你所愿。
