超链接样式顺序：一个看似简单却常被忽略的细节
在CSS中为超链接设置四种状态样式，是前端开发的基础课。但你是否遇到过这样的情况：鼠标悬停效果时有时无，点击瞬间的反馈消失得无影无踪？问题往往不在于代码写错了，而在于顺序写反了。
核心规则就一句话：必须按 link → visited → hover → active 的顺序声明。否则，hover 和 active 效果很可能被拦截，无法生效。
为什么顺序错了，样式就会“失效”？
这背后是CSS的层叠规则在起作用。简单来说，当多个同优先级的规则作用于同一元素时，后声明的样式会覆盖前面的。如果把 a:hover 写在 a:link 前面，那么当浏览器解析时，后面定义的 a:link 样式就会覆盖掉之前定义的 hover 效果。尤其是在鼠标移入的瞬间，浏览器可能仍将其判定为 link 状态，导致悬停样式完全不起作用。
由此引发的常见“症状”包括：
- 鼠标悬停没反应：
hover的样式被link或visited的样式覆盖了。 - 点击瞬间无反馈：
active状态被更早或更晚定义的hover样式拦截。 - 已访问链接颜色异常：例如，链接始终显示未访问的颜色，这可能是因为
visited样式被写在了hover之后，并且选择器优先级处理不当。
移动端适配：别忘了 :active 和 :focus
将视线转移到移动端，情况又有些不同。在触屏设备上，:active 状态的触发时间极短，往往只有毫秒级，用户肉眼几乎无法察觉。很多用户会因此误以为按钮“点不动”或没有反馈。
这时，一个实用的技巧是补充 a:focus 样式。同时，确保元素具有正确的 tabindex 以保证键盘可访问性，能为触屏和键盘用户都提供清晰的反馈。例如，可以这样设置：
立即学习“前端免费学习笔记（深入）”；
a:link { color: #0055bb; text-decoration: none; }
a:visited { color: #0077bb; text-decoration: none; }
a:hover { color: #ff0000; text-decoration: underline; }
a:active, a:focus { outline: 2px solid #00aaff; }
需要特别注意的是：出于隐私保护，浏览器对 :visited 伪类的样式施加了严格限制。通常只能修改 color、background-color、border-color 等少数几个属性，无法读取其状态或影响布局，也不能为其添加 transition 过渡动画。
关于下划线：取消可以，但反馈必须到位
为了设计美观，取消链接的默认下划线是常见操作。但这绝非简单地设置 text-decoration: none 就万事大吉了。关键在于，你必须为用户提供另一种清晰、即时的视觉反馈，否则链接的可访问性将大打折扣。
- 可以在
a:link和a:visited中移除下划线（text-decoration: none）。 - 但务必在
a:hover或a:focus状态中恢复下划线，或者采用改变背景色、增加边框、添加阴影等同样明显的变化来提示用户。 - 避免使用
* { text-decoration: none; }这样的全局通配符规则，它会无差别地移除所有元素的下划线，包括你可能并不想处理的第三方组件内的链接，导致样式失控。
示例代码中如果漏掉了 hover 状态的下划线恢复，正是新手最容易踩的坑——用户面对页面，根本无从分辨哪里是可以点击的链接。
说到底，超链接样式的核心难点，往往不在于记忆“LVHA”这个顺序口诀。真正容易被忽略的，是 :visited 的隐私限制所带来的样式约束，以及 :active 在移动端那转瞬即逝的不可靠性。别只满足于在桌面浏览器上测试效果，拿起真机多点几下，才能最终确认交互反馈是否真的到位、清晰。
