a:visited仅允许设置color、background-color等有限样式，且受同源策略、协议限制及LVHA顺序约束，颜色值还可能被浏览器降级。
a:visited 只能安全设置颜色相关属性，其他样式会被浏览器静默忽略——这不是你写错了，是现代浏览器强制限制。
为什么 a:visited 设置的颜色没变
常见失效不是语法问题，而是环境或逻辑被忽略：
-
href值无效：空href、href="#"或javascript:void(0)不会被记为“已访问” - 本地文件协议：
file://下 Chrome/Edge 默认禁用:visited，必须起本地服务（如python3 -m http.server）测试 - 跨源链接：点击过
https://github.com，你的页面里a[href="https://github.com"]的:visited永远不生效——同源策略延伸，非 bug - 未真实跳转：在 DevTools 里强制触发
:visited状态，不代表浏览器真记录了访问历史
a:visited 能用的属性只有这几个
Chrome、Firefox、Safari 当前仅允许以下属性在 :visited 中渲染生效：
-
color（文字色，最稳妥） -
background-color（仅纯色，禁用渐变、rgba()、hsl()） -
border-color（含border-bottom-color等细分项） -
outline-color、column-rule-color、text-decoration-color
以下全部无效，且不会报错：
-
opacity、transform、filter -
font-weight、font-size、text-shadow -
display、margin、padding、visibility
必须按 LVHA 顺序写，否则样式会失效
a:link → a:visited → a:hover → a:active 是硬性顺序，错一个就可能覆盖掉 :visited：
立即学习“前端免费学习笔记（深入）”；
a:link { color: #1a6dff; }
a:visited { color: #777; border-bottom: 1px dashed #ccc; }
a:hover { color: #0a58d0; transition: color 0.2s; }
a:active { color: #084298; }
- 别把
:hover写在:visited前面，悬停时可能压住已访问状态 - 别加
!important——它绕不过隐私策略，只会让调试更难 -
text-decoration在:visited中允许，但推荐用text-decoration-color更精准
替代方案：什么时候该放弃 :visited
当你要支持这些场景时，:visited 就不可靠了：
- 多设备同步已读状态（它只存在当前浏览器当前 Cookie 分区）
- 用户登录后跨账号持久化标记（关掉标签页就丢）
- 需要图标、背景图、过渡动画等丰富反馈
这时改用 JS + localStorage：
- 点击链接时存 URL：
localStorage.setItem('visited:' + url, '1') - 页面加载后遍历
document.querySelectorAll('a[href]')，匹配并加class="visited-js" - 用任意 CSS 控制：
.visited-js { background: #f5f5f5; padding-left: 20px; }
真正容易被忽略的是：:visited 的颜色值会被浏览器主动降级（比如你设 rgb(255,0,0)，Chrome 可能渲染成 rgb(180,0,0)），这不是 bug，也绕不过——设计时优先选中性灰阶或低饱和蓝/紫。
