结论：无法绕过浏览器对 :visited 的样式限制，这是为防止历史探测而设的强制安全策略；仅 color、background-color 等极少数颜色属性有效，其余如 background-image、opacity、font-size 等均被静默丢弃。
直接说结论：你无法绕过浏览器对 :visited 的样式限制，这不是 bug，而是强制安全策略；能改的只有 color、background-color（纯色）、border-color 等极少数颜色类属性，其他一律静默丢弃。
为什么 :visited 里设 background-image 或 transform 没反应
浏览器主动拦截这些属性，防止通过样式差异探测用户访问历史——比如用 getComputedStyle() 读取背景图是否加载、元素是否缩放，就能反推某链接是否被点过。这不是兼容性问题，是 Chrome/Firefox/Safari 共同执行的硬性规则。
-
background-image、background（含渐变）、opacity（中间值如0.5）、font-size、display、visibility全部无效，DevTools 里会显示为 strikethrough 灰线 -
transition只允许写transition: color .2s，但写transition: all或transition: background-color就会被整个忽略 - 哪怕加了
!important，只要属性不在白名单里，照样不生效
:visited 的合法写法和常见失效原因
能用的属性少，但用对了才起作用。很多“没效果”其实是写法或环境问题，不是限制本身。
- 必须用具体颜色值：
#666✅，rgba(102,102,102,0.8)❌（透明度被禁），currentColor❌（动态值不被允许） - 伪类顺序必须是
a:link→a:visited→a:hover→a:active，否则:hover可能覆盖掉:visited的color - URL 必须完全一致：
/page.html和/page.html?ref=1被视为两个不同链接，后者未访问过就不会触发:visited - 本地
file://协议下多数浏览器直接禁用:visited，需起 HTTP 服务（如python3 -m http.server）测试
真正可用的替代方案：别硬刚浏览器限制
想实现“已访问链接有图标/粗体/背景高亮”，就得放弃 :visited，换一套状态管理逻辑。
立即学习“前端免费学习笔记（深入）”；
- 前端用
localStorage记录点击过的href，渲染时给对应<a>加class="is-visited"，再写普通 CSS 规则 - 服务端在模板中根据用户登录态和浏览记录，直出
class="visited"或data-visited="true"属性 - 对关键操作链接（如“下载”“提交”），绑定
click事件后立即添加 class，不依赖跳转后的历史匹配 - 避免用
IntersectionObserver+history.state做 SPA 路由判断——它反映的是“是否进入过该路由”，不是“是否点击过这个链接”
最易被忽略的一点：浏览器不仅限制样式，还封死了所有 JS 探测路径——el.matches(':visited') 返回 false，getComputedStyle(el).color 永远返回未访问时的值。这意味着，任何试图“先试一下样式是否生效”的调试思路，从底层就被堵死了。
