必须按 :link → :visited → :hover → :active 顺序声明，否则已访问链接的悬停或点击样式大概率失效；:link 和 :visited 是互斥基础状态，而 :hover 和 :active 是可叠加态，若顺序错乱则 :visited 会覆盖 :hover 的同名属性。
必须按 :link → :visited → :hover → :active 顺序声明，否则已访问链接的悬停或点击样式大概率失效。
为什么 :link 和 :visited 必须写在最前面
浏览器按声明顺序层叠样式，:link 和 :visited 是互斥的基础状态（一个链接不可能同时“未访问”和“已访问”），而 :hover 和 :active 是叠加态——它们可以同时作用于未访问或已访问链接。如果把 :hover 写在 :visited 前面，已访问链接就会被 :visited 的同名属性（比如 color）覆盖，导致悬停时颜色不变。
常见错误现象：
-
a:hover { color: red; }放在a:visited上方 → 已访问链接鼠标移入无颜色变化 - 只写了
a:hover和a:active，漏掉:link和:visited→ 未访问链接可能继承父级color，悬停前后对比弱甚至不可见
:visited 能改什么、不能改什么
现代浏览器对 :visited 施加了严格隐私限制：它不是“不生效”，而是被主动阉割了大部分样式能力，防止通过 CSS 探测用户历史。
可安全设置的属性只有：
-
color（但不支持rgba()或hsla()等带透明度的值） -
background-color（部分浏览器已禁用，不建议依赖） -
border-color、outline-color
以下写法会被浏览器直接忽略，且不报错：
a:visited { font-size: 14px; }a:visited { background-image: url(...); }a:visited { transform: scale(0.95); }a:visited { transition: color 0.2s; }
如何给特定类的链接单独设置状态样式
想只影响带 class="nav-link" 的链接？别用 .nav-link a:link（这是后代选择器，匹配的是 .nav-link 里的所有 a 元素），而要用 a.nav-link:link 这种元素+类组合写法。
正确示例：
a.nav-link:link { color: #1a73e8; }
a.nav-link:visited { color: #666; }
a.nav-link:hover { color: #0d47a1; text-decoration: underline; }
a.nav-link:active { color: #0b3d8a; }
注意点：
- 如果同时有全局
a:link和局部a.nav-link:link，后者优先级更高，会覆盖前者 - 不要混用
!important—— 它可能绕过 LVHA 顺序逻辑，让:visited意外覆盖:hover - 空 href（如
<a href="#"></a>）在多数浏览器中被视为“已访问”，直接走:visited样式，:hover可能看起来没反应
移动端与键盘用户的实际表现差异
:active 在触摸设备上极不可靠：Android 部分版本需触发 touchstart 才渲染，iOS Safari 默认禁用 :active 样式以避免误触反馈干扰。单纯靠 CSS 无法稳定提供点击反馈。
更稳妥的做法：
- 给
<a></a>加cursor: pointer（桌面端识别更明确） - 在
中确保有<meta name="viewport" content="width=device-width, initial-scale=1"> - 需要强反馈时，用 JS 监听
touchstart/touchend或mousedown/mouseup切换临时 class，比如is-pressed - 键盘用户依赖
:focus，建议至少补充a:focus { outline: 2px solid #1a73e8; }，且:focus应与:active视觉一致
最容易被忽略的是：你以为 :visited “没起作用”，其实它正在按浏览器规则悄悄过滤掉你写的大部分样式——这不是 bug，是设计使然。别试图绕过它，接受它的边界，才能写出稳定可用的链接状态逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
