← 全部文章

教程

高亮已访问的链接 —— 以及为什么 CSS 允许的这么少

15 5月 2026 · 作者 JustZix Team

搜索结果、一份文章列表、文档 —— 却没办法看出你已经打开过哪些链接。一条 CSS 规则解决它。而沿途值得了解一下为什么 :visited 选择器被限制得这么古怪。

规则

在规则的 CSS 标签页里，用一个带链接列表的页面的 URL 模式，或全局 *：

a:visited {
  color: #9333ea !important;
}

就这些。已访问的链接变成紫色。选一个与普通链接颜色差异强烈的颜色，这样对比一眼就能读出来。

为什么能做的这么少

自然的本能：既然我能改颜色，那我也加个图标或背景吧。你不会的 —— 而且这是有意的。

如果 :visited 允许任意样式，任何页面都能检测你的历史记录。它会插入一千个隐藏链接，通过 :visited 给每个不同的尺寸或背景，用 JavaScript 测量布局，然后读出你访问过哪些 URL。这曾是一个真实的漏洞（历史嗅探）—— 浏览器把它堵上了。

什么被允许，什么不被

在 :visited 上只有颜色属性有效：color、background-color、border-color、outline-color。而即便是这些也被往一个方向「撒谎」：

• 没有布局属性。display、font-size、content、visibility —— 在 :visited 上被忽略。这就是为什么 a:visited::after { content: " ✓" } 不会工作。
• getComputedStyle 撒谎。问它一个已访问链接的颜色时，它返回未访问的颜色 —— 这样 JavaScript 读不到真相。
• 背景和边框必须事先可见。你可以改一个背景的颜色，但你不能以可测量的方式从无到有「点亮」它。

想要的不止颜色？

徽章、图标、访问计数 —— :visited 不会给你这些。它们需要在 JavaScript 里追踪你的历史记录，那是一个独立得多、沉重得多的话题。对大多数情况来说仅颜色就绰绰有余 —— 因为你真正需要的唯一一件事就是「我来过这里没有」。

坑

• 按精确 URL 匹配。:visited 在你访问过正好那个地址时才有效。一个指向 /article 的链接，如果你去过的是 /article?ref=x，它不会亮起来。
• SPA 和链接。在单页应用里一次「导航」可能是一次没有真正导航的状态改变 —— 那时浏览器不记录任何历史条目，:visited 不适用。
• 对比度。白底上的紫色可读；在深色主题上选一个更亮的色调。

另见

• 示例 —— 这段代码片段和其他开箱即用的 CSS
• 为任何网站启用深色模式 —— 另一条面向舒适的 CSS 规则
• 隐藏 cookie 横幅 —— 基于 CSS 的页面精简

安装 JustZix —— 一眼看出你已经去过哪里。