无法绕过浏览器对:visited的样式限制，这是为防止历史探测而设的强制安全策略；仅color、background-color等极少数颜色属性有效，其余如background-image、opacity、font-size等均被静默丢弃。
根本原因不是你写错了，而是浏览器主动丢弃了大部分 :visited 样式——这是为防历史探测设的硬性安全限制，不是 bug，也绕不过。
为什么 :visited 设置 color 还是没反应
常见“无效”现象其实是浏览器在执行隐私策略：即使只改 color，也会因环境或写法问题被跳过。
- 本地用
file://协议打开 HTML → 多数浏览器直接禁用:visited，必须起 HTTP 服务（如python3 -m http.server） - 链接 URL 带不同查询参数，比如
/post?id=1和/post?id=2→ 浏览器视为两个独立链接，互不影响访问状态 - 写了
a:visited { color: #666; }，但漏了a:link→ 未访问链接用浏览器默认色（通常是蓝色），视觉上“没变化” - 用了内联样式
style="color:red"→ 优先级高于伪类，:visited完全不生效 - 选择器权重太高，比如
.nav a:visited，但实际链接没加class="nav"→ 规则根本不匹配
:visited 只能改哪些属性，且怎么写才合法
能生效的属性极少，且值必须是“无泄漏风险”的纯色；任何带透明度、动态计算或图像/尺寸语义的写法都会被静默丢弃。
- 允许的属性：
color、background-color、border-color（单边或缩写均可）、outline-color、text-decoration-color - 禁止的值：
rgba(102,102,102,0.8)（透明度被禁）、currentColor（动态值不被允许）、hsl()（部分浏览器会拒绝） - 只接受具体颜色值：
#666✅、rgb(102, 102, 102)✅、darkgray✅ - 加
!important→ 整条:visited规则会被浏览器直接忽略（规范强制）
LVHA 顺序不是建议，是生效前提
a:link → a:visited → a:hover → a:active 必须严格按此顺序声明。否则 :hover 会覆盖 :visited 的 color，导致“点过之后悬停还是原色”。
- 错误写法：
a:link { color: blue; } a:hover { color: red; } a:visited { color: purple; }→:hover权重相同但后声明，压倒:visited - 正确写法：
a:link { color: blue; } a:visited { color: purple; } a:hover { color: red; } a:active { color: green; } - 注意：如果用了类选择器（如
.btn:visited），它的权重高于a:visited，可能意外覆盖
别试 JS 探测，它已经被彻底封死
任何想用 JS 判断是否已访问的尝试都注定失败——这不是兼容性问题，是浏览器明确拦截。
-
el.matches(':visited')→ 永远返回false -
getComputedStyle(el).color→ 返回的是未访问时的值，不是真实渲染色 - 用
IntersectionObserver或history.state判断路由 → 反映的是“是否进过该页面”，不是“是否点过这个链接”
真正难的不是写对 CSS，而是接受：浏览器不让你靠 :visited 做复杂状态区分。想加图标、粗体、背景高亮？只能自己用 localStorage 记 URL、服务端注入 class，或绑定 click 事件当场打标——这些才是可落地的路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
