:visited
尝试一下
隐私限制
出于隐私原因,浏览器严格限制你可以让此伪类应用的样式,以及使用它们的方式:
- 允许使用的 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 Standard # selector-visited |
Selectors Level 4 # link |
浏览器兼容性
BCD tables only load in the browser
参见
- 隐私和 :visited 选择器
- 链接相关伪类:
:link
、:active
和:hover