Movatterモバイル変換


[0]ホーム

URL:


  1. 面向开发者的 Web 技术
  2. CSS:层叠样式表
  3. CSS 参考
  4. 选择器
  5. :visited

此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。

View in EnglishAlways switch to English

:visited

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

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

尝试一下

p {  font-weight: bold;}a:visited {  color: forestgreen;  text-decoration-color: hotpink;}
<p>Pages that you might have visited:</p><ul>  <li>    <a href="https://developer.mozilla.org">MDN Web Docs</a>  </li>  <li>    <a href="https://www.youtube.com/">YouTube</a>  </li></ul><p>Pages unlikely to be in your history:</p><ul>  <li>    <a href="https://developer.mozilla.org/missing-1">Random MDN page</a>  </li>  <li>    <a href="https://example.com/missing-1">Random Example page</a>  </li></ul>

: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

浏览器兼容性

参见

Help improve MDN

Learn how to contribute

This page was last modified on byMDN contributors.


[8]ページ先頭

©2009-2025 Movatter.jp