CSS链接伪类link与visited详解

它不是“低优先级”，而是“被浏览器降权处理”：即使你的选择器权重更高（比如 .nav a:visited），只要涉及禁用属性，就直接丢弃，不参与层叠计算。

使用场景很窄：通常只用来微调文字颜色，比如让已访问链接变灰（#666），和未访问的蓝色（#007bff）形成区分。别指望靠它做状态高亮或动画反馈。

• 不要写 a:link, a:visited { transition: color .15s; } —— :visited 的 transition 会被静默忽略，导致状态切换生硬
• 如果同时定义了 a { color: #333; } 和 a:visited { color: #999; }，后者生效；但若 a:visited 写在前面，而 a 后面又带 !important，那普通链接会覆盖已访问链接的颜色（因为 :visited 的声明本身没加 !important）
• 伪类顺序有影响：a:link → a:visited → a:hover → a:active 是推荐顺序，否则 :hover 可能盖不住 :visited 的颜色（尤其当两者都设了 color）

如何安全地给已访问链接加视觉反馈

真要突破限制，只能绕开 :visited 本身：用 JS 记录点击并打标记，再靠 class 控制样式。这不是“替代 CSS 伪类”，而是换一套状态管理逻辑。

性能上几乎无影响，但要注意兼容性边界 —— 比如单页应用里 pushState 不触发 :visited 更新，而 JS 方案可以主动同步。

• 监听 click 事件，对 event.target.closest('a[href]') 添加 data-visited="true" 或 class is-visited
• CSS 改用 a.is-visited { color: #777; }，所有属性都可用
• 需要持久化？存到 localStorage，但注意同源限制和存储大小（URL 过长会截断）
• 别用 :visited + JS 混合方案 —— 浏览器可能在页面加载时已渲染完 :visited 状态，JS 后续操作 class 反而造成闪烁或冲突

哪些链接根本不会触发 :visited

容易踩的坑：开发时本地预览用 file:// 协议，或测试时用 localhost:3000/#/path 这种前端路由，:visited 全部失效 —— 因为没有真实 HTTP 请求，浏览器不认为发生了“访问”。

• href 为 mailto:、tel:、javascript:、#top 等非网络协议，不触发 :visited
• 跨域链接（比如 href="https://example.com"）受同源策略影响，主站无法读取外部域名的访问状态，但该链接自身仍可能被标记（取决于目标站是否允许 referrer）
• HTTP 重定向（301/302）后最终落地页才计入 :visited，中间跳转页不算

复杂点在于：这个机制由浏览器底层控制，开发者无法查询、清空或模拟。一旦漏掉某个协议或路径写法，样式就彻底失联，而且毫无报错提示。

好了，本文到此结束，带大家了解了《CSS链接伪类link与visited详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！