:visited
定义和用法
:visited
,访问过的链接。:visited
,是一个伪类,并且它适用于到已经访问的另一资源的超链接。:visited
,适用于指向已访问的URL的链接,访问URL是链接点显示在用户代理的历史记录中的网址。:visited
,此状态与:link
状态互斥。
语法:
:link
设置超链接<a>
在其链接地址已被访问过时的样式。
- 如果需要给超链接定义:访问前,鼠标悬停,当前被点击,已访问。这4种伪类效果,而又没有按照一致的书写顺序,不同的浏览器可能会有不同的表现
- 超链接的4种状态,需要有特定的书写顺序才能生效。超链接状态顺序::
:link
、:visited
、:hover
、:active
。注意,:hover
必须位于:link
和:visited
之后,:active
必须位于:hover
之后
限制
出于隐私原因,浏览器严格限制您可以让此伪类应用的样式,以及使用它们的方式:
- 允许使用的 CSS 属性为
color
,background-color
,border-color
,border-bottom-color
,border-left-color
,border-right-color
,border-top-color
,column-rule-color
,和outline-color
。 - 允许使用的 SVG 属性为
fill
和stroke
。 - 允许使用的样式的αlpha 分量(透明度)将被忽略。设置在
:visited
中的样式将使用元素的非:visited
访问状态的αlpha 分量,如果该分量为0,这个样式将被完全忽略。 - 虽然这些样式可以改变用户最终的颜色外观,但
window.getComputedStyle
方法将存在并且始终返回非访问颜色的值。
浏览器支持
![]() | ![]() | ![]() | ![]() | ![]() |
所有浏览器都支持 |
例子
/* 所有被访问过的 <a> 变绿 */ a:visited {color: green;}
未设置颜色或透明的属性不能使用:visited
。在可以使用此伪类设置的属性中,浏览器可能只有color
和column-rule-color
两个默认值。因此,对于其他属性,在使用:visited
选择器前,应该先为这些属性设置基础样式。
//HTML <a href="#test-visited-link">你是否访问过此链接?</a> <a href="">你已经访问过此链接。</a> //CSS /* 指定某些属性的默认值,允许他们使用:visited状态进行样式设置 */ a { background-color: white; border: 1px solid white; } a:visited { background-color: yellow; border-color: hotpink; color: hotpink; }