必须按lvha顺序（:link→:visited→:hover→:active）声明，因四者权重相同，后声明者覆盖前声明者；顺序错会导致未访问链接显示:visited样式、悬停或点击状态失效，且:visited仅支持color等有限属性，其他样式被静默忽略。
为什么:link必须写在:visited前面
因为浏览器把 a:link 和 a:visited 当作同权重选择器（都是 0,1,0），谁在 CSS 源码里写在后面，谁就覆盖前者。如果你把 a:visited 放在 a:link 前面，哪怕链接根本没被访问过，也会按 a:visited 的规则渲染——这不是 bug，是层叠规则的必然结果。
常见错误现象包括：
- 未访问链接显示成紫色（
a:visited颜色） - 悬停时没反应，开发者工具里看到
a:link规则被划掉，来源却是你自己的 CSS 文件 - 清空缓存、换浏览器重试后依然如此
为什么:hover和:active必须排在:visited之后
鼠标悬停在一个已访问链接上时，a:visited 和 a:hover 同时匹配。如果 a:hover 写在 a:visited 前面，它的样式会被后者覆盖（因为同权值 + 后声明优先），导致已访问链接悬停失效。
同样，a:active 是瞬时态，必须放在 a:hover 后面，否则快速点击时可能根本看不到按下效果——a:hover 会把它压住。
实操建议：
-
a:link必须是第一个，它是所有链接的初始态基础 -
a:visited必须紧接其后，它只对已访问链接生效，但不能比a:link权重高 -
a:hover和a:active要放在最后，且a:hover在a:active前 - 哪怕你只用其中两个（比如只要
a:link和a:visited），也得把整条链写全，否则可能引发意外覆盖
:visited能改的样式比你想的少得多
现代浏览器出于隐私保护，严格限制 a:visited 可设置的属性。你只能安全使用：
-
color、background-color -
border-color（及border-top-color等方向变体） outline-color- 少数几个
text-开头的属性，如text-decoration-color
其他任何改动都会被静默忽略，不报错也不生效：
-
a:visited { font-weight: bold; }—— 完全没反应 -
a:visited { display: none; }或font-size、padding、transform—— 全部丢弃 -
background-image已被禁用，别试图用它换图标
测试:visited效果时容易忽略的关键点
a:visited 状态由浏览器本地历史决定，不是实时更新的。页面加载后它就“冻结”了当前状态，JS 修改 location 或跳转不会刷新当前页的链接样式。
测试时要注意：
- 别只在一个标签页里反复点——新开无痕窗口，手动访问目标链接后再回来，才能看到效果
- 隐私模式下、或启用了“阻止网站跟踪”选项时，
a:visited可能完全不触发，或者只对同源链接生效 -
!important无法绕过安全策略，反而让调试更难，别用
顺序错了，a:visited 不仅颜色不生效，连它本该支持的有限属性都可能被压制——这不是优先级问题，是浏览器直接忽略该状态匹配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
