CSS链接伪类:link与:visited_管理网页链接的历史状态

浏览器限制:visited仅能设置少数颜色类属性（如color）以防止隐私泄露，其他样式如background、transition均被忽略；:link与:visited互斥且仅对有效url的标签生效。

为什么 :link 和 :visited 不能设置任意样式

浏览器主动限制了 :visited 的样式能力，这是出于隐私保护——防止脚本通过 css 探测用户访问历史。你无法用它改变 color 以外的大多数视觉属性，比如 background-color、border、transform，甚至 transition 都会被忽略。

常见错误现象：写了 a:visited { background: #eee; } 却完全没效果；或者加了 transition: color .2s，结果只有 :link 动，:visited 切换时突变。

• :link 只匹配未访问过的链接，:visited 匹配已访问过的 —— 两者互斥，且仅对 <a href></a> 生效（href 必须是有效 URL，空值或 javascript:void(0) 不触发）
• 能安全设置的 :visited 属性极有限：color、outline-color、column-rule-color 等纯颜色类，且必须是 color 值本身可被继承的类型（比如不能用 currentColor 动态推导）
• 现代浏览器（chrome/firefox/safari）还会进一步屏蔽 getComputedStyle() 对 :visited 样式的读取，所以 js 也无法绕过检测

: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

不是所有带 href 的 <a></a> 都算“可访问链接”。浏览器只对能进入历史记录栈的 URL 做标记。

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

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

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