:visited 伪类必须按 lvha 顺序声明,仅支持有限样式属性,https 环境下才可靠,且易被高权重选择器覆盖。

link 和 visited 伪类必须按 LVHA 顺序写
浏览器只认 a:link、a:visited、a:hover、a:active 这个顺序,写反了(比如把 :visited 放在 :link 后面)会导致 :visited 样式被覆盖,访问过的链接颜色根本不会变。
常见错误现象:a:visited 完全不生效,无论怎么刷新、点开再返回都没反应——大概率是顺序错了。
-
a:link只对未访问的链接起作用,已访问的链接它管不了 -
a:visited只能设置有限的 CSS 属性:颜色类(color、background-color、border-color等)、outline、cursor,不能改font-size或display,否则会被忽略 - 现代浏览器出于隐私限制,
:visited的样式无法通过 JavaScript 获取,也不能用getComputedStyle读取真实值
为什么设置了 color 却没变化?检查是否被其他选择器覆盖
比如写了 a:visited { color: #666; },但页面里还有 .nav a { color: #333; },后者权重更高,就会压掉 :visited 的颜色。
使用场景:导航栏、文章内链、页脚链接,只要想区分访问状态,就得确保 :visited 规则足够具体。
立即学习“前端免费学习笔记(深入)”;
- 提高权重的方法:加父级容器,比如
article a:visited或#main-content a:visited - 避免用
!important,它会让后续调试更难,优先靠选择器特异性解决 - Chrome DevTools 的 Styles 面板里,被划掉的
color值说明它被别的规则覆盖了
visited 伪类在 HTTPS 页面下才可靠
HTTP 页面中,某些浏览器(尤其是新版 Chrome/Firefox)会弱化或禁用 :visited 样式,防止通过 CSS 侧信道探测用户历史记录。所以本地 file:// 或 HTTP 环境下测试,很可能看到 :visited 表现异常。
性能 / 兼容性影响:这不是 bug,是主动的安全限制。哪怕你代码完全正确,在非 HTTPS 下也可能失效。
- 开发时务必用
localhost(现代浏览器视其为安全上下文)或部署到 HTTPS 环境验证 - 不要试图绕过这个限制——比如用 JS 检查
document.querySelectorAll('a')的visited状态,浏览器根本不提供该接口 - 如果产品必须支持 HTTP 内网环境,得换思路:用后端标记或 localStorage 记录点击,再加 class 控制颜色
想让已访问链接带下划线?别只改 color
很多人以为改了 color 就够了,结果发现访问前后都一样——因为默认 a 有 text-decoration: underline,而 :visited 如果没显式声明,会继承父级或浏览器默认值,容易混淆视觉差异。
参数差异:text-decoration 不在 :visited 的受限属性列表里,可以放心设。
- 推荐写法:
a:link { color: #007bff; text-decoration: underline; }+a:visited { color: #6c757d; text-decoration: underline; } - 如果想强调区别,可给已访问链接去掉下划线:
a:visited { color: #6c757d; text-decoration: none; } - 注意:
text-decoration-color和text-decoration-style在:visited中也支持,但兼容性稍差(IE 不支持),用前查 caniuse








