:visited伪类仅允许修改有限颜色属性，且受严格限制。它不能用于图标、粗体、动画等样式，仅支持color、background-color等具体颜色值，且必须遵循LVHA顺序，避免复杂选择器；替代方案更实用。
:visited 伪类能用，但只在极窄范围内有效——它不是“给已访问链接加样式”的通用工具，而是浏览器在隐私红线内划出的一小块安全区。想靠它实现图标、粗体、动画或布局变化？直接放弃。
为什么 :visited 设置了颜色却没反应
这不是代码写错了，是浏览器主动“假装没看见”。常见原因包括：
- 链接地址带查询参数（
/article?id=1和/article?id=2被视为不同 URL） - 测试时用的是
file://协议——所有现代浏览器完全禁用该协议下的:visited - 用了 HTTPS 页面跳转到 HTTP 目标页，部分浏览器不记录访问状态
-
a:visited前面写了更具体的选择器（比如a[href^="https"]），权重更高，覆盖了它 - 没同时声明
a:link，导致浏览器回退到默认样式逻辑，:visited失效
:visited 真正允许修改的 CSS 属性有哪些
仅限以下颜色类属性，且必须用具体值（不能用 inherit、currentcolor 或 transparent）：
-
color（文字色） -
background-color（纯色背景，不支持渐变） -
border-color（含border-top-color等细分项） outline-color-
text-decoration-color（下划线/删除线颜色） -
fill和stroke（仅对 SVG 中带href的<a></a>生效）
以下写法全部静默无效：font-weight、display、opacity（中间值如 0.5 不可靠）、transform、transition（哪怕只写 transition: color 也常被忽略）、background-image、text-shadow。
如何写出不会被覆盖的 :visited 规则
必须严格按 LVHA 顺序书写，且避免链式伪类组合：
- ✅ 正确顺序：
a:link→a:visited→a:hover→a:active - ❌ 错误写法：
a:hover:visited或a:visited:hover—— 语义混乱，旧版 Safari 可能解析失败 - ✅ 悬停时想改已访问链接颜色，应单独写：
a:visited:hover { color: #cc0000; } - ❌ 不要用复杂选择器：
.nav a:visited可能失效；a:visited span完全无效（:visited不能影响后代） - ⚠️ 注意：Chrome 136+ 引入“已访问链接分区”，跨子域链接（
blog.example.comvsshop.example.com）可能不再共享访问状态
替代方案比硬刚 :visited 更实用
当设计需要图标、粗体、折叠/展开等真实状态反馈时，:visited 就该让位了：
- 后端渲染时，根据用户历史数据直接给
<a></a>加class="visited"，前端自由控制所有样式 - 前端用
localStorage记录点击过的href，再用 JS 动态添加 class（注意同源限制和隐私合规） - SPA 场景下监听
history.state或使用IntersectionObserver判断是否进入过某路由 - 别依赖
getComputedStyle检测状态——所有浏览器都返回未访问时的计算值，这是硬性封禁
最易被忽略的一点：你写的 a:visited { color: #999; } 在深灰背景上可能根本看不见对比度，而浏览器又不允许你加粗或加边框来补救——这时候，与其调色，不如换方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
