1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
---
title: ':visited'
slug: 'Web/CSS/:visited'
tags:
- CSS
- 伪类
- 布局
translation_of: 'Web/CSS/:visited'
---
<p>{{CSSRef}}</p>
<h2 id="概述">概述</h2>
<p><strong><code>:visited</code></strong> CSS<a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">伪类</a>表示用户已访问过的链接。出于隐私原因，可以使用此选择器修改的样式非常有限。</p>
<pre class="brush: css"><code>/* 所有被访问过的 <a> 变绿 */
a:visited {
color: green;
}</code>
</pre>
<p>这个样式可能会被后声明的其他链接相关的伪类覆盖，这些伪类包括 ({{cssxref(":link")}}, {{cssxref(":hover")}},和{{cssxref(":active")}})。要适当地设置链接样式，请将<code>:visited</code> 规则放在<code>:link</code> 规则之后，但在<code>:hover</code> 和<code>:active</code> 规则之前，参照 LVHA <em>顺序</em>:<code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>。</p>
<h2 id="限制">限制</h2>
<p>出于隐私原因，浏览器严格限制您可以让此伪类应用的样式，以及使用它们的方式：</p>
<ul>
<li>允许使用的 CSS 属性为{{ cssxref("color") }}, {{ cssxref("background-color") }}, {{ cssxref("border-color") }}, {{ cssxref("border-bottom-color") }}, {{ cssxref("border-left-color") }}, {{ cssxref("border-right-color") }}, {{ cssxref("border-top-color") }}, {{ cssxref("column-rule-color") }}, 和{{ cssxref("outline-color") }}。</li>
<li>允许使用的 SVG 属性为{{SVGAttr("fill")}} 和 {{SVGAttr("stroke")}}。</li>
<li>允许使用的样式的 αlpha 分量(透明度)将被忽略。 设置在<code>:visited</code>中的样式将使用元素的非<code>:visited</code> 访问状态的 αlpha 分量， 如果该分量为0，这个样式将被完全忽略。</li>
<li>虽然这些样式可以改变用户最终的颜色外观，但 {{domxref("window.getComputedStyle")}} 方法将存在并且始终返回非访问颜色的值。</li>
</ul>
<div class="note style-wrap">
<p>注意：有关这些限制及其背后原因的更多信息，请参阅 <a href="https://developer.mozilla.org/en-US/docs/CSS/Privacy_and_the_:visited_selector" title="/en-US/docs/CSS/Privacy_and_the_:visited_selector">Privacy and the :visited selector</a>。</p>
</div>
<h2 id="示例">示例</h2>
<p>未设置颜色或透明的属性不能使用<code>:visited</code>。 在可以使用此伪类设置的属性中，浏览器可能只有<code>color</code>和<code>column-rule-color</code>两个默认值。 因此，对于其他属性，在使用<code>:visited</code>选择器前，应该先为这些属性设置基础样式。 </p>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><code><a href="#test-visited-link">你是否访问过此链接？</a>
<a href="">你已经访问过此链接。</a></code></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css"><code>a {
/* </code>指定某些属性的默认值，允许他们使用：visited状态进行样式设置<code> */
background-color: white;
border: 1px solid white; </code><code>
}
a:visited {
background-color: yellow;
border-color: hotpink;
color: hotpink;
}</code>
</pre>
<h3 id="结果">结果</h3>
<p>{{ EmbedLiveSample('示例', '', '', '', 'Web/CSS/:visited') }}</p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">
<p>Comment</p>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('HTML WHATWG', 'scripting.html#selector-visited', ':visited') }}</td>
<td>{{ Spec2('HTML WHATWG') }}</td>
<td></td>
</tr>
<tr>
<td>{{ SpecName('CSS4 Selectors', '#link', ':visited') }}</td>
<td>{{ Spec2('CSS4 Selectors') }}</td>
<td>无变化。</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Selectors', '#link', ':visited') }}</td>
<td>{{ Spec2('CSS3 Selectors') }}</td>
<td>无变化。</td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':visited') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>取消<code>:visited只适用于</code> {{ HTMLElement("a") }} 元素的限制。由于隐私原因，浏览器会限制该行为。</td>
</tr>
<tr>
<td>{{ SpecName('CSS1', '#anchor-pseudo-classes', ':visited') }}</td>
<td>{{ Spec2('CSS1') }}</td>
<td>初次定义。</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
{{Compat("css.selectors.visited")}}
<h2 id="参见">参见</h2>
<ul>
<li><a href="/en-US/docs/CSS/Privacy_and_the_:visited_selector" title="/en-US/docs/CSS/Privacy_and_the_:visited_selector">Privacy and the :visited selector</a></li>
<li>链接相关伪类:{{cssxref(":link")}}，{{cssxref(":active")}}，和{{cssxref(":hover")}}。</li>
</ul>
|
