因为隐私保护，现代浏览器禁用 :visited 设置 background-image；仅允许 color、border-color 等极少数无泄漏风险属性，尺寸、图像、动画等一律无效。
为什么 :visited 不能设置 background-image
因为现代浏览器主动禁用了 :visited 对多数样式属性的控制权，background-image 正在被限制之列。这不是 CSS 规范没写，而是浏览器出于隐私保护目的做了硬性拦截——防止脚本通过样式探测用户访问历史。
:visited 还能改哪些样式
目前仅允许修改极少数“无泄漏风险”的属性，包括：
-
color、outline-color、border-color（但不能是border-top-color这类子属性） -
text-decoration-color、text-emphasis-color column-rule-color
所有涉及尺寸、位置、图像、渐变、阴影、过渡、动画、滤镜的属性一律被忽略。例如：background、background-image、transform、opacity、visibility 都无效。
常见误判场景：你以为生效了，其实没生效
开发者常在本地测试时发现 :visited 看似能改背景图，原因通常是：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 用的是旧版浏览器（如 IE11 或 Chrome 50 以前），尚未启用该限制
- 页面未部署在 HTTP/HTTPS 服务下，而是直接双击打开
file://协议，部分浏览器会放宽策略 - CSS 被其他规则覆盖，比如
a:link的background值没重置，导致你以为:visited生效了
真实线上环境（HTTPS + 主流浏览器）中，background-image 在 :visited 下始终被丢弃，DevTools 的 Styles 面板里会显示为 strike-through 灰线。
替代方案：如何实现“已访问链接有视觉区分”
绕过限制的关键是避开 :visited 本身，转而用可编程方式维护状态：
- 前端记录点击行为：
localStorage存已访问的 URL hash，渲染时动态加 class（如is-visited） - 服务端下发访问状态：登录态下，后端返回链接是否已访问的标记字段，模板直出 class
- 用
rel="noopener"+target="_blank"链接规避隐私检测需求（不推荐，仅限特定场景）
注意：任何依赖客户端 JS 探测 :visited 样式是否应用的 hack（比如 getComputedStyle 后比对 color）也已被浏览器封禁，返回的永远是未访问时的值。
真正难的不是写代码，而是意识到：这个限制不可绕过，也不该绕过。设计上接受它，比花半天找“兼容写法”更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
