a:visited必须写在a:hover前面，因为二者权重相同（0,1,1），浏览器按声明顺序层叠，若:hover在前，则已访问链接悬停时会被:visited覆盖而失效；正确顺序为a:link→a:visited→a:hover→a:active，符合状态流转逻辑且满足css层叠规则。
为什么a:visited必须写在a:hover前面
因为:visited和:hover权重完全相同（都是0,1,1），浏览器按CSS声明顺序决定谁生效。如果把:hover写在:visited前面，那么当用户悬停在一个已访问链接上时，:visited的样式会覆盖:hover——结果就是鼠标移上去没反应。
常见错误写法：
a:hover { color: red; }
a:visited { color: purple; }
正确做法是让:visited先声明，:hover后声明，这样悬停时才能“胜出”。
link → visited → hover → active 是强制顺序，不是建议
这不是风格偏好，而是CSS层叠规则下的硬性要求。四个伪类优先级一模一样，后写的规则会覆盖前面同权重的规则。所以必须按 a:link → a:visited → a:hover → a:active 顺序写，否则：
-
a:hover写在a:link前面：未访问链接悬停失效 -
a:active写在a:hover前面：点击瞬间颜色被悬停色盖掉 -
a:visited写在a:hover后面：已访问链接悬停无变化
这个顺序也对应真实状态流转逻辑：链接总是先有“未访问/已访问”基础状态，再叠加“悬停”“按下”这些临时状态。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
:visited 的样式限制比你想的更严格
现代浏览器出于隐私保护，只允许 a:visited 修改极少数CSS属性：
- 允许：
color、background-color、border-color、outline-color - 禁止：
font-size、display、visibility、transition、text-shadow、几乎所有影响布局或可探测的属性
试图给 a:visited 加 transition 或改 padding 不仅无效，还会让整条规则被浏览器静默丢弃。别浪费时间调试它为什么“不生效”——它本来就不该支持。
:active 在移动端基本不可见，别只测桌面
a:active 触发窗口只有几毫秒，在触屏设备上肉眼几乎无法捕捉。很多开发者写完一通效果，只在Chrome里点点鼠标就以为OK了，结果真机一试——点不动、没反馈、用户觉得按钮失灵。
解决方法很简单：
- 把
a:active和a:focus合并写：a:active, a:focus - 确保链接有
tabindex="0"（尤其对非元素模拟链接行为时） - 用明显视觉变化代替颜色微调：比如加
outline、改background-color、加box-shadow
真正容易被忽略的不是怎么写顺序，而是：visited 的隐私墙和 active 的瞬时性——它们决定了你写的样式在真实用户手里到底能不能被看见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
