此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
: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> 元素。
In this article
尝试一下
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 伪类是互斥的。
隐私限制
出于隐私原因,浏览器严格限制你可以让此伪类应用的样式,以及使用它们的方式:
- 允许使用的 CSS 属性有
color、background-color、border-color、border-bottom-color、border-left-color、border-right-color、border-top-color、column-rule-color、outline-color、text-decoration-color和text-emphasis-color。 - 允许使用的 SVG 属性有
fill和stroke。 - 允许使用的样式的 alpha 分量(透明度)将被忽略。设置在
:visited中的样式将使用元素的非:visited访问状态的 alpha 分量。在 Firefox 中,当 alpha 分量为0时,:visited中设置的样式将被完全忽略。 - 虽然这些样式可以改变用户最终的颜色外观,但
window.getComputedStyle方法将存在并且始终返回非访问颜色的值。 <link>元素永远不会被:visited匹配。
备注:有关这些限制及其背后原因的更多信息,请参阅隐私和 :visited 选择器。
语法
css
:visited { /* ... */}示例
未设置颜色或透明的属性不能使用:visited。在可以使用此伪类设置的属性中,浏览器可能只有color 和column-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> |
浏览器兼容性
参见
- 隐私和 :visited 选择器
- 链接相关伪类:
:link、:active和:hover