浏览器禁用:visited伪类的非颜色属性是为防止历史嗅探攻击，仅允许color、background-color等有限属性生效，且getComputedStyle无法读取visited状态下的color值。
浏览器主动禁用非颜色属性是为了防历史嗅探攻击
这不是写法错误，也不是兼容性问题，而是 Chrome、Firefox、Safari 等所有主流浏览器从多年前就统一执行的安全策略。核心目标是阻止恶意网站通过 CSS 侧信道探测用户访问过哪些外部链接——比如构造 1000 个不同 href 的 a 标签，再用 JavaScript 轮询 getComputedStyle(el).backgroundImage 或 getComputedStyle(el).fontWeight 是否变化，从而反推出你的浏览历史。
因此，浏览器在解析样式时就直接剥离了所有非安全属性：哪怕你写了 a:visited { font-weight: bold; background-image: url(./check.png); opacity: 0.8; }，这些声明在计算阶段就被忽略，连触发重绘的机会都没有。
:visited 允许修改的属性清单（2026 年实测有效）
目前仅以下属性在所有现代浏览器中稳定生效：
-
color（唯一最可靠、最常用） -
background-color（注意：仅纯色，不支持渐变或透明度变化） -
border-color、border-top-color等各方向边框颜色（但border-width、border-style无效） outline-colorcolumn-rule-color-
text-decoration-color（部分浏览器支持，text-decoration整体仍被禁用）
所有其他属性，包括但不限于：font-weight、display、transform、transition、animation、visibility、padding、height、background-image，全部被忽略。
立即学习“前端免费学习笔记（深入）”；
为什么 getComputedStyle 读不到 :visited 的 color 值？
这是同一套隐私机制的延伸：浏览器不仅限制你能设什么，还刻意“模糊”你能读到什么。即使 a:visited { color: #666; } 在视觉上生效，调用 getComputedStyle(el).color 返回的永远是未访问状态下的值（比如 rgb(0, 0, 255)）。
这意味着你无法用 JS 检测某个链接是否已被访问——这正是设计目的。试图绕过它（比如用自定义属性 --is-visited）同样失败，因为 :visited 中声明的 CSS 自定义属性根本不会被解析和应用。
真正能落地的替代方案只有两个方向
如果你需要背景图、图标、缩进、下划线等超出颜色的能力，必须放弃纯 CSS 方案：
- 服务端渲染时加 class：登录用户点击后，后端记录并返回
class="visited"，前端用普通 class 控制任意样式 - 前端 localStorage 手动标记：监听
click事件，存localStorage.setItem(`visited:${href}`, 'true')；页面加载后遍历链接，匹配并添加visited-js类
注意：后者只标记“点过”，不等于“已访问完成”。如果用户点了但页面没加载完就关闭标签页，状态可能不准。真实场景中，这个细节常被忽略，却直接影响体验一致性。
