必须按 link → visited → hover → active 顺序写，否则后声明的同优先级样式会覆盖前面的，导致 hover 和 active 效果被拦截或不可见。
必须按 link → visited → hover → active 顺序写，否则 hover 和 active 很可能不生效。
为什么顺序错了样式就失效？
CSS 层叠规则决定了后声明的样式会覆盖前面同优先级的规则。如果把 a:hover 写在 a:link 前面，而两者都设置了 color，那后续 a:link 的颜色就会压掉 hover 效果——尤其在鼠标刚移入的瞬间，浏览器可能仍匹配到 link 状态。
常见错误现象：
- 鼠标悬停没反应（
hover被link或visited覆盖） - 点击瞬间无反馈（
active被hover拦截） - 已访问链接颜色异常（比如始终显示未访问色，因
visited写在了hover后且用了更宽泛的选择器）
移动端要注意 :active 和 :focus
在触屏设备上，:active 触发时间极短（毫秒级），肉眼几乎不可见。很多用户会误以为“点不动”。这时建议补一个 a:focus 样式，并确保 tabindex 可用：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
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 动画。
要不要取消下划线？怎么安全地取消？
取消下划线本身没问题，但必须给用户提供其他视觉反馈，否则可访问性会出问题：
- 在
a:link和a:visited中加text-decoration: none - 务必在
a:hover或a:focus中恢复下划线，或改用背景色/边框/阴影等明显变化 - 避免全站统一用
* { text-decoration: none }，它会无差别干掉所有链接下划线，包括第三方组件里的
示例中漏掉 hover 下划线，是新手最常踩的坑——用户根本看不出哪里能点。
真正容易被忽略的不是怎么写，而是 :visited 的隐私限制和 :active 在移动端的不可靠性。别只盯着桌面效果测，真机点两下，才能确认反馈是否到位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
