:visited的background-color和border-color失效是因浏览器隐私限制：仅支持纯色值（如#666、red），禁用rgba()、渐变等；border-color须独立声明（如border-bottom-color），禁用border简写；颜色还可能被降级防指纹追踪。
为什么:visited设了background-color和border-color却没反应
不是写法错，是浏览器直接丢弃了部分声明——background-color在绝大多数现代浏览器中**仅支持纯色值（如#666、red），禁用渐变、rgba()、hsla()、transparent及带 alpha 的 hex（如#00000080）；border-color虽被允许，但border-width或border-style仍被静默忽略。
常见失效现象：
-
a:visited { background-color: rgba(0, 0, 0, 0.1); }→ 渲染为默认背景色（甚至透明） -
a:visited { border: 2px dashed #999; }→ 只有border-color可能生效，width和style全被丢弃 -
a:visited { background-color: linear-gradient(to right, #f00, #00f); }→ 完全不生效，DevTools 中该行显示为 strike-through 灰线
:visited能改的边框颜色有哪些写法才真正有效
浏览器只认“安全子集”里的border-color值，且必须是独立声明（不能混在border简写里）：
- ✅ 推荐：
border-bottom-color: #555;、border-left-color: darkgray; - ❌ 无效：
border: 1px solid #555;（简写触发整条规则被降级） - ⚠️ 风险：
border-top-color: hsl(200, 50%, 40%);→ 部分浏览器会降级为灰阶近似色，不可控 - 注意：
outline-color同理，但outline简写也不安全
文字背景色失效的真正原因：不是 CSS 能力问题，而是隐私拦截
你写的background-color确实进入了样式表，但浏览器在应用前就做了两层过滤：
立即学习“前端免费学习笔记（深入）”；
- 第一层：判断是否属于“可推断访问历史”的高风险值（如低饱和度+高亮度组合可能被重映射）
- 第二层：对同一域名下大量链接批量测试时，强制统一降级颜色以防止指纹追踪（Chrome 尤其激进）
- 结果就是：即使 DevTools 显示样式“已启用”，实际渲染色可能和你写的完全不同，且无法通过 JS 获取真实值（
getComputedStyle返回的是未访问状态下的 fallback 色）
替代方案：什么时候必须放弃:visited改用 JS
当你要实现以下任一效果时，:visited已不可靠，必须换方案：
- 需要给已访问链接加图标、padding 或背景图（哪怕只是小圆点）
- 要求暗色模式下保持一致的视觉反馈（
:visited在@media (prefers-color-scheme: dark)中行为不稳定） - 跨子域链接也要标记（如从
docs.example.com访问过blog.example.com，:visited不跨子域生效） - 用户点击后需立即反馈（
:visited依赖完整页面加载，SPA 跳转常不触发）
最轻量的做法是监听click事件 + localStorage存 URL hash，再遍历链接加is-visited类——这样你就能自由用background、border-radius、box-shadow甚至animation了。
