:visited - CSS(层叠样式表) 编辑

概述

:visited CSS伪类表示用户已访问过的链接。出于隐私原因,可以使用此选择器修改的样式非常有限。

/* 所有被访问过的 <a> 变绿 */
a:visited {
  color: green;
}

这个样式可能会被后声明的其他链接相关的伪类覆盖,这些伪类包括 (:link, :hover,和:active)。要适当地设置链接样式,请将:visited 规则放在:link 规则之后,但在:hover 和:active 规则之前,参照 LVHA 顺序::link — :visited — :hover — :active

限制

出于隐私原因,浏览器严格限制您可以让此伪类应用的样式,以及使用它们的方式:

注意:有关这些限制及其背后原因的更多信息,请参阅 Privacy and the :visited selector

示例

未设置颜色或透明的属性不能使用:visited。 在可以使用此伪类设置的属性中,浏览器可能只有colorcolumn-rule-color两个默认值。 因此,对于其他属性,在使用:visited选择器前,应该先为这些属性设置基础样式。 

HTML

<a href="#test-visited-link">你是否访问过此链接?</a>
<a href="">你已经访问过此链接。</a>

CSS

a {
  /* 指定某些属性的默认值,允许他们使用:visited状态进行样式设置 */
  background-color: white;
  border: 1px solid white; 
}

a:visited {
  background-color: yellow;
  border-color: hotpink;
  color: hotpink;
}

结果

规范

SpecificationStatus

Comment

HTML Living Standard
:visited
Living Standard
Selectors Level 4
:visited
Working Draft无变化。
Selectors Level 3
:visited
Recommendation无变化。
CSS Level 2 (Revision 1)
:visited
Recommendation取消:visited只适用于 <a> 元素的限制。由于隐私原因,浏览器会限制该行为。
CSS Level 1
:visited
Recommendation初次定义。

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.01.0 (1.7 or earlier)3.53.51.0
Restrictions in CSS properties allowed in a statement using :visited64.0 (2.0)8 (or earlier)?5.0
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support?1.0 (1.0)???

参见

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

词条统计

浏览:75 次

字数:9351

最后编辑:7年前

编辑次数:0 次

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文