:visited

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

:visited CSS 伪类会在用户访问链接后生效,出于隐私保护的原因,使用该选择器可以修改的样式非常有限。:visited 伪类仅适用于带有 href 属性的 <a><area> 元素。

尝试一下

:visited 和未访问的 :link 伪类定义的样式可以被任何后续的用户动作伪类(:hover:active)覆盖,只要它们的特殊性至少相等。为了适当地样式化链接,将 :visited 规则放置在 :link 规则之后但在 :hover:active 规则之前,按照 LVHA 顺序定义link:visited:hover:active:visited 伪类和 :link 伪类是互斥的。

隐私限制

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

备注: 有关这些限制及其背后原因的更多信息,请参阅隐私和 :visited 选择器

语法

css
:visited {
  /* ... */
}

示例

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

HTML

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

CSS

css
a {
  /* 为某些属性指定非透明的默认值,使它们可以与 :visited 状态一起使用样式。 */
  background-color: white;
  border: 1px solid white;
}

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

结果

规范

Specification
HTML
# selector-visited
Selectors Level 4
# visited-pseudo

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:visited
:visited privacy: selector does not match <link> elements
Restrict CSS properties allowed in a statement using :visited for privacy

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见