:visited

Avatar of Sara Cope
Sara Cope

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费信用额度!

:visited 伪类选择器可以在用户浏览器已经访问过链接的情况下更改锚链接 (<a>) 元素的部分样式。 它的作用是帮助用户区分他们访问过和未访问过的链接。

a:visited {
  color: gray;
}

限制和用法

关于 :visited,存在一些隐私问题,即恶意网站可以包含指向大量具有 :visited 样式的网站的链接,然后使用 JavaScript 测试链接的视觉样式,以向服务器报告用户访问过的网站。 这会侵犯用户的隐私,并可能泄露个人身份信息。

因此,大多数浏览器限制了可以在 :visited 链接上更改的样式,以及可以使用 getComputedStyle 方法报告的样式信息。

这是一个关于这种情况的很好总结。

这些是可以使用 :visited 更改的属性

您只能在链接已在“未访问”或 :link 状态下具有这些属性的情况下使用 :visited 更改这些属性。 您不能使用它添加链接上原本不存在的属性。 例如

如果链接元素已具有背景颜色,则可以更改 :visited 链接的 background-color

如果链接在“未访问”状态下没有背景颜色,则不能:visited 链接上添加 background-color

了解大多数链接伪类应该以特定顺序声明也很有用。 顺序是

  1. 链接
  2. 访问
  3. 悬停
  4. 激活

如果您在链接中包含 :focus 样式,则通常将其添加到“悬停”和“激活”之间。

演示

扩展 :visited

虽然 :visited 链接的直接样式有限,但有很多巧妙的方法可以扩展您为访问过的链接设置样式的选项。 2015 年出现了很多分享新 :visited 链接样式的想法的博客文章

重新审视 :visited,来自 Joel Califa,展示了使用 localstorage 为访问过的内域链接设置样式的示例。

破解 :visited,来自 Una Kravets,将 :visited 倒过来,将“未访问”标签作为 :after 内容添加到链接,然后在访问链接后使用背景颜色交换将其隐藏。

使用 CSS 混合模式突破 :visited 的限制,来自 Stelian Firez,结合了 归因于 DuckDuckGo 的一个小 HTML 技巧background-blend-mode: screen; 来淡化访问过的链接旁边的一个自定义图标。

使用 SVG 为访问过的链接设置样式,来自 Dudley Storey。 使用 SVG 图像,其中 fill 设置为与页面背景颜色匹配(当链接处于 :link 状态时),然后在链接变为 :visited 后设置为另一种颜色。 本教程还包括使用 Unicode 字符而不是 SVG 的替代方法。

浏览器支持

所有浏览器 都支持此功能。

更多信息