DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费信用额度!
:visited
伪类选择器可以在用户浏览器已经访问过链接的情况下更改锚链接 (<a>
) 元素的部分样式。 它的作用是帮助用户区分他们访问过和未访问过的链接。
a:visited {
color: gray;
}
限制和用法
关于 :visited
,存在一些隐私问题,即恶意网站可以包含指向大量具有 :visited
样式的网站的链接,然后使用 JavaScript 测试链接的视觉样式,以向服务器报告用户访问过的网站。 这会侵犯用户的隐私,并可能泄露个人身份信息。
因此,大多数浏览器限制了可以在 :visited
链接上更改的样式,以及可以使用 getComputedStyle
方法报告的样式信息。
这些是可以使用 :visited
更改的属性
color
background-color
border-color
(及其子属性)outline-color
fill
和stroke
属性的颜色部分
您只能在链接已在“未访问”或 :link
状态下具有这些属性的情况下使用 :visited
更改这些属性。 您不能使用它添加链接上原本不存在的属性。 例如
如果链接元素已具有背景颜色,则可以更改 :visited
链接的 background-color
。
如果链接在“未访问”状态下没有背景颜色,则不能在 :visited
链接上添加 background-color
。
链接伪类顺序
了解大多数链接伪类应该以特定顺序声明也很有用。 顺序是
- 链接
- 访问
- 悬停
- 激活
如果您在链接中包含 :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 的替代方法。
浏览器支持
所有浏览器 都支持此功能。
asd
这是 扩展:已访问 列表中的另一个。
这是受 Joel's Califa 的脚本启发的,也使用本地存储来保存已访问的页面。它通过突出显示新内容/未读内容(而不是已读内容)来反转概念。 “新”标志可以限制为“过去 X 天添加的内容”或所有时间,直到访问者查看它 http://blog.fofwebdesign.co.uk/17-show-new-content-until-visited-link-tracking
需要注意的是,:visited 不会在隐身模式下工作,因为隐身模式会禁用记住链接是否已访问。
非常感谢你!!!!!我是一个学习新手,我花了大部分上午的时间试图弄清楚为什么我的“已访问”链接不会更改某些属性。信不信由你,这是我唯一找到有关“已访问”限制的信息的网站,即使 W3Schools 也没有。对此我非常感谢你。头痛消失了,我不再是一个完全的编码菜鸟。虽然我今天花了几个小时来修改属性、值和代码,担心我在某个地方多写了一个大写字母。好吧,我们生活和学习。
非常感谢,并致以最诚挚的问候
Martin Eyre
伙计。非常感谢你。
“您只能在链接已在“未访问”或:link 状态下具有这些属性的情况下使用:visited 来更改这些属性。您不能使用它来添加链接上不存在的属性。例如:”
这让我很抓狂,为什么我可以将:link 边框设置为图像,而不能将:visited 设置为图像。
在 Stylus 中为两种状态都设置样式使 a:visited 最终更改颜色。
来自奥地利的满满的爱
我读到这些限制是为了防止恶意网站跟踪我们的活动。但是,像 Google.com 这样的恶意网站不是有成千上万种方法可以跟踪我们的活动吗?如果是这样,为什么这些样式限制仍然存在?