:visited 仅支持修改 color、background-color、border-color（单边）、outline-color 等纯色样式，其余如字体加粗、动画、js 事件等均被浏览器禁用；lvha 顺序必须严格遵守，否则 :hover 会覆盖 :visited；本地 file:// 协议、带不同查询参数的 url、选择器不匹配或使用 !important 均导致失效；应改用 localstorage、服务端注入或路由判断等替代方案。
:visited 不能可靠地区分已访问链接——这不是你写错了，而是浏览器主动禁用的。
现代浏览器（Chrome、Firefox、Safari）从隐私保护出发，已将 :visited 的能力压缩到仅允许修改极少数纯色样式。想靠它加图标、改字体粗细、显示提示文字、触发动画或 JS 事件？全部做不到。
为什么 :visited 设置颜色经常不生效
最常见原因不是 CSS 写得不对，而是浏览器根本没把它当“已访问”：
- 本地开发用
file://协议打开 HTML 文件 →:visited完全被忽略 - 链接 URL 带查询参数，比如
/post?id=1和/post?id=2→ 浏览器视为两个独立链接，互不影响访问状态 - CSS 选择器优先级太高，比如写了
.nav a:visited，但页面里链接是@#@#@#@#@#@#@#@#@#@0且没加class="nav"→ 规则压根不匹配 - 用了
!important→ 整条:visited规则会被浏览器直接丢弃（这是规范强制要求）
:visited 只能改哪些样式
能安全写的只有这几个属性，且值必须是不带透明度的纯色：
-
color（支持#666、rgb(102,102,102)、darkgray） -
background-color（仅限纯色，rgba()或渐变会失效） -
border-color（只对单边有效，如border-left-color；border-color: #999可以，但border: 1px solid #999中的border缩写可能被部分忽略） outline-color
以下写法看似合理，实则无效：
a:visited { font-weight: bold; } /* 被静默忽略 */
a:visited { display: none; } /* 不会隐藏链接 */
a:visited { transform: scale(1.1); } /* 无反应 */
LVHA 顺序不是建议，是硬性依赖
a:link、a:visited、a:hover、a:active 必须严格按这个顺序声明，否则 :hover 会覆盖 :visited，导致“点过之后悬停还是原色”。
错误写法示例：
a:link { color: blue; }
a:hover { color: red; }
a:visited { color: purple; } /* 这里被前面的 :hover 规则压制了 */
正确写法：
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: orange; }
真要区分访问状态，该换方案了
如果你需要的是“点击后加小图标”“折叠已读菜单项”“统计阅读完成度”，:visited 就不该出现在你的技术选型里。替代路径更可控：
- 前端记录：用
localStorage存已访问的href值，页面加载时遍历<a></a>标签并手动加class="visited" - 服务端注入：登录用户场景下，后端渲染时直接在
<a></a>上加data-visited="true"或 class - 路由级判断：SPA 应用中，用当前路由与历史访问记录比对，动态更新链接状态
真正难的不是写对那几行 CSS，而是意识到：浏览器把 :visited 设计成一个“只能看颜色”的只读开关，而不是一个可用的状态管理接口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
