必须按lvha顺序（:link→:visited→:hover→:active）声明，因四者优先级相同，后声明者覆盖前声明者；顺序错会导致未访问链接显示:visited样式、悬停或点击状态失效。
为什么:link样式被:visited覆盖了
因为浏览器把 :link 和 :visited 当作同权重选择器（都是 0,1,0），谁写在后面，谁就生效。如果你把 a:visited 放在 a:link 前面，哪怕链接根本没被访问过，也会按 :visited 的规则渲染——这不是 bug，是 CSS 层叠规则的必然结果。
常见错误现象包括：
- 未访问链接显示成紫色（
:visited颜色），悬停也没反应 - 开发者工具里看到
a:link规则被划掉，来源却是你自己的 CSS 文件 - 清空缓存、换浏览器重试后依然如此
必须按 LVHA 顺序书写，不是建议而是硬性要求
LVHA 指 :link → :visited → :hover → :active 的声明顺序。这个顺序不是为了好记，而是浏览器解析时的状态优先级链：从稳定态（未访问/已访问）到瞬时态（悬停/点击）逐级叠加。一旦中间断开或错位，后续伪类就会失效。
实操建议：
-
a:link必须是第一个，它是所有链接的初始态基础 -
a:visited必须紧接其后，它只对已访问链接生效，但不能比:link权重高 -
a:hover和a:active要放在最后，否则鼠标按下瞬间会被:hover覆盖 - 哪怕你只用其中两个（比如只要
:link和:visited），也得把整条链写全，否则可能引发意外覆盖
:visited 能设的样式比你想象中少得多
现代浏览器出于隐私保护，强制限制 :visited 只能修改极少数属性：只有 color、background-color、border-color（及各方向变体）、outline-color，以及几个 text- 开头的属性（如 text-decoration-color）。
这意味着：
-
a:visited { font-size: 14px; }—— 完全无效，控制台也不会报错 -
a:visited { opacity: 0.8; transform: scale(0.95); }—— 被静默丢弃 -
a:visited { transition: color 0.2s; }—— 整条规则可能被忽略 - 别指望用
:visited控制布局、动画或触发可观测行为，那部分样式注定不运行
多个 CSS 文件里定义了不同伪类怎么办
如果 a:link 在 base.css 里，而 a:visited 在 theme.css 里，且后者加载更晚，那 :visited 就会覆盖 :link——哪怕顺序本身是对的，加载时机错了也不行。
解决方法很简单：
- 把所有链接伪类声明集中在一个地方，比如
links.css，按 LVHA 顺序一次性写完 - 确保这个文件在 HTML 中
<link>的位置靠后，但又不能被其他自定义样式覆盖 - 检查构建工具（如 Vite/Webpack）是否因代码分割打乱了导入顺序；最终生成的 HTML 中，
<link href="links.css">应该出现在reset.css和components.css之后、page.css之前 - 用开发者工具的 Styles 面板点开一个已访问链接，直接看
a:visited规则里哪些属性带灰色横线——那是被浏览器拦截的信号
:hover 就可能永远不生效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
