必须按lvha顺序（a:link→a:visited→a:hover→a:active）声明，否则:hover等交互状态对已访问链接失效；:visited仅支持color等极少数颜色属性，其余声明被浏览器静默忽略。
必须按 a:link → a:visited → a:hover → a:active 顺序声明，否则已访问链接的悬停或点击样式大概率失效；:visited 能改的只有极少数颜色类属性，其他写上去也白搭。
为什么顺序错乱会导致 :hover 失效
浏览器按 CSS 声明顺序层叠样式。:link 和 :visited 是互斥状态（一个链接不可能既“未访问”又“已访问”），而 :hover 和 :active 是叠加态——它们可以同时作用于未访问或已访问链接。如果把 a:hover { color: red; } 写在 a:visited 前面，且两者都设置了 color，那么已访问链接就会被 :visited 的颜色覆盖，悬停时毫无变化。
常见错误现象：
-
a:hover { color: red; }放在a:visited上方 → 已访问链接鼠标移入无颜色变化 - 只写了
a:hover和a:active，漏掉:link和:visited→ 未访问链接可能继承父级color，悬停前后对比弱甚至不可见
:visited 实际能用的样式有哪些
现代浏览器（Chrome 136+、Firefox、Safari）对 :visited 施加了严格隐私限制：它不是“不生效”，而是被主动阉割了大部分样式能力，防止通过 CSS 探测用户历史。
可安全设置的属性仅限：
-
color（但不支持rgba()或hsla()等带透明度的值） -
background-color（部分浏览器已禁用，不建议依赖） -
border-color、outline-color、column-rule-color
以下写法会被浏览器直接忽略，且不报错：
-
a:visited { background: #eee; }→ 完全没效果 -
a:visited { transition: color .2s; }→ 静默忽略，状态切换突变 -
a:visited { font-size: 14px; }或opacity、transform→ 不参与层叠计算，直接丢弃
本地开发或 file:// 协议下 :visited 不生效怎么办
很多开发者在本地双击 HTML 文件打开时发现 :visited 样式完全不触发，这不是代码问题，而是浏览器策略：
- Chrome/Firefox 在
file://协议下默认禁用:visited状态匹配，防止本地文件窃取浏览历史 - 即使 href 是有效 URL（如
https://example.com），只要页面本身是本地文件，:visited就不会激活 - 解决方法：用本地服务器启动（如
npx serve、python3 -m http.server或 VS Code Live Server 插件）
另外注意：:link 和 :visited 只对带有效 href 属性的 <a></a> 元素生效；href="javascript:void(0)" 或空值 href="" 不会触发任一伪类。
真要突破限制，只能换思路
如果你需要基于访问状态做更灵活的 UI 控制（比如加图标、改背景、隐藏内容），:visited 不是可靠选项。唯一可行路径是放弃纯 CSS：
- 用 JavaScript 监听点击事件，给对应
<a></a>添加class="is-visited" - 将访问记录存入
localStorage或sessionStorage，页面加载时读取并打标 - 后续样式全部基于 class 控制，不再依赖伪类
这个方案绕开了浏览器限制，但也意味着你要自己维护状态同步逻辑——比如用户清空历史后，页面不会自动更新 class，得额外处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
