必须按LVHA顺序声明，否则a:visited会因层叠覆盖a:hover/a:active导致悬停和点击效果失效；且:visited仅支持color等有限颜色属性，深度定制需JS+localStorage实现。
必须按 L、V、H、A 顺序写，否则 a:visited 会覆盖 a:hover 或 a:active，导致悬停/点击效果失效。
为什么顺序错了就不起作用
CSS 中这四个伪类权重完全相同，浏览器按声明顺序层叠。如果把 a:visited 写在 a:hover 后面，只要链接已被访问过，哪怕鼠标悬停，最终生效的仍是 a:visited 的样式 —— 因为它后声明、后覆盖。
-
a:link和a:visited都只依赖历史访问状态，不响应实时交互 -
a:hover和a:active是瞬时状态，但一旦被更靠后的规则覆盖，就“看不见”了 - 现代浏览器（Chrome/Firefox/Safari）都严格遵循这个层叠逻辑，不是兼容性问题，是 CSS 本身规则
标准写法：LVHA 顺序不能省略
即使你只用其中两个状态，也要保持整体顺序结构，避免未来加新样式时出错。推荐模板如下：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
/* 必须按此顺序 */
a:link { color: #007bff; text-decoration: none; }
a:visited { color: #6c757d; text-decoration: none; }
a:hover { color: #0056b3; text-decoration: underline; }
a:active { color: #004080; text-decoration: underline; }-
a:link可以省略（即直接写a），但一旦用了a:link，就必须放在最前 -
a:active很少单独强调，但若要支持键盘聚焦或触摸反馈，建议保留 - 不要把
a:hover拆到其他选择器里（比如.nav-link:hover），否则 LVHA 规则失效
容易踩的坑：visited 的限制与替代方案
a:visited 在现代浏览器中受严格限制：只能设置 color、background-color、border-color 等少数属性，不能改 font-size、display 或触发动画 —— 这是安全策略，不是 bug。
立即学习“前端免费学习笔记（深入）”；
- 试图用
a:visited { opacity: 0.8; }会静默失败 - 想实现“已访问变图标”，得靠 JS 记录点击并加 class，再用
.visited类控制 - 开发调试时清缓存或隐身窗口测试，因为
visited状态依赖本地 history，普通刷新不重置
真正麻烦的不是记不住 LVHA，而是忘了 a:visited 的能力边界 —— 它只管颜色类样式，其余交互逻辑得交给 JS 或 class 控制。
