link与visited顺序解析，掌握LVHA规则技巧

本文深入解析了CSS中链接伪类的LVHA声明顺序（:link→:visited→:hover→:active）为何是浏览器强制执行的硬性规则而非优先级问题——顺序错位会导致:visited等状态样式被直接忽略，而非降级生效；同时揭示了:visited因隐私保护被现代浏览器严格限制样式能力，仅允许极少数颜色相关属性生效，其余如尺寸、动画、显隐等设置均会被静默丢弃；最后提供实用调试 checklist，帮你快速定位:visited失效的三大常见根源，避免在错误方向上徒劳折腾。

:link 和 :visited 必须按 LVHA 顺序声明，否则 :visited 可能完全失效

浏览器对 a:link 和 a:visited 的处理不是“谁在后面谁赢”，而是严格按状态逻辑和声明顺序解析。一旦顺序错，比如把 :hover 写在 :link 前面，或 :visited 放在 :hover 后面，部分状态样式就压根不会触发——不是优先级低，是被浏览器直接忽略。

• :link 必须在最前（只匹配未访问链接）
• :visited 紧随其后（只匹配已访问链接）
• :hover 和 :active 必须放在最后，且 :hover 在 :active 前
• 这个顺序是规范强制要求，不是建议；Chrome、Firefox、Safari 全部遵守

为什么 LVHA 是硬性规则，而不是优先级问题？

因为 :link 和 :visited 是互斥状态：一个链接不可能同时“未访问”又“已访问”。浏览器在匹配时会先判断是否已访问，再决定走哪条路径。如果 :visited 声明在 :link 后面，它会被当作“覆盖规则”处理；但实际中，:visited 样式只有在明确满足访问状态时才参与层叠，顺序错会导致该状态不被识别。

• 错误写法：a:hover { color: red; } a:visited { color: purple; } → :visited 样式大概率不生效
• 正确写法必须是：a:link → a:visited → a:hover → a:active
• 助记口诀 LoVe HAte（L-V-H-A），每个首字母对应一个伪类

:visited 的样式能力被浏览器大幅限制，别白费劲

出于隐私保护，现代浏览器禁止 :visited 使用大多数视觉属性。你设了也没用，浏览器会静默丢弃。

• 允许的属性极少：color、background-color、border-color（及各方向变体）、outline-color、column-rule-color
• 禁止的常见属性：display、visibility、font-size、width、height、transform、transition、几乎全部 filter
• 连 text-decoration-color 都被禁，只能用 text-decoration（但无法单独改颜色）

调试时发现 :visited 不起作用？先查这三件事

别急着怀疑 CSS 加载失败或缓存问题，90% 是基础配置翻车。

• 检查 HTML 中 是否有 href 属性（无 href 则不触发任何链接伪类）
• 确认当前链接确已被访问过（可手动点开再返回，或清空浏览历史重试）
• 打开开发者工具 Elements 面板，选中链接元素，看 Styles 面板右侧是否显示 :visited 规则被划掉（strikethrough）——划掉即表示被浏览器屏蔽或未命中