现代浏览器限制 :visited 伪类仅能使用 color、background-color、border-color 等少数属性，禁用 display、transition 等以防隐私泄露；JS 无法读取真实访问状态，getComputedStyle 始终返回未访问样式；安全方案应聚焦白名单属性，辅以伪元素图标或服务端状态标记。
visited 伪类被浏览器限制读取哪些 CSS 属性
现代浏览器（Chrome、Firefox、Safari）对 :visited 的样式控制做了严格限制，不是所有属性都能用。这是出于隐私保护——防止脚本通过样式探测用户历史访问记录。
能安全使用的只有这几个：color、background-color、border-color（含 border-top-color 等）、outline-color、column-rule-color，以及 text-decoration-color 和 text-emphasis-color。其他如 display、visibility、font-size、width、height，甚至 transition 都会被忽略。
- 尝试给
a:visited设置display: none？浏览器直接无视，链接照常显示 - 加
transition: color .2s是允许的；但换成transition: background-color .2s就失效（因为background-color虽然可用，但 transition 不在白名单里） - Firefox 还额外禁止
text-shadow和filter在:visited中生效
为什么不能用 JavaScript 读取 :visited 样式
浏览器不仅限制样式，还彻底封死了 JS 获取 :visited 状态的路径。调用 getComputedStyle(el).color 或 window.getComputedStyle 查询 a 元素时，无论链接是否访问过，返回的都是未访问状态的值（即 a:link 的计算结果）。
-
el.matches(':visited')永远返回false（Chrome/Firefox 已废弃该用法） - 试图用
document.styleSheets动态注入规则并检测渲染差异？现代浏览器已屏蔽这类侧信道探测 - 想靠
offsetWidth或布局变化反推？同样被防御机制拦截，测量结果恒定
安全美化已访问链接的可行方案
既然能力受限，就聚焦在允许范围内做清晰、一致的视觉区分。关键是别试图“模拟未限制时的效果”，而是接受约束，换种方式表达状态。
- 只用
color区分：比如未访问用#0066cc，已访问用#666，简单可靠 - 配合
text-decoration（注意：text-decoration本身不可设，但text-decoration-color可以），例如a:visited { color: #555; text-decoration-color: #aaa; } - 如果设计要求更明显差异，考虑加图标：用伪元素
::after+content插入 ✅，但需确保该图标不依赖访问状态判断（即对所有链接都显示，或由后端/数据层控制） - 避免在深色背景上仅靠亮度差区分——
color值变化太小会导致可访问性问题，建议至少保持 3:1 的对比度
兼容性与渐进增强要注意什么
IE9+、Edge 12+、所有现代浏览器都遵循这套限制，不存在“老版本能用、新版本不行”的回退问题。真正要小心的是开发者自己绕过限制的尝试。
- 不要写
a:visited { color: red !important; }再配一堆 JS 检测逻辑——既无效，又增加维护负担 - 若项目用 CSS-in-JS（如 styled-components），注意它生成的
:visited规则仍受浏览器限制，不会因为“动态生成”就解锁新能力 - 测试时别只看 Chrome：Firefox 对
:visited的限制最激进（比如连outline-style都禁），用它验证最稳妥
真正难的不是怎么写样式，而是放弃“必须让已访问链接看起来完全不同”的执念——浏览器不让你做的，往往有充分理由。把精力放在数据层标记状态、或服务端预渲染上，反而更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
