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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
|
---
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>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>1.0</td>
<td>{{ CompatGeckoDesktop("1.0") }}</td>
<td>3.5</td>
<td>3.5</td>
<td>1.0</td>
</tr>
<tr>
<td>Restrictions in CSS properties allowed in a statement using <code>:visited</code></td>
<td>6</td>
<td>{{CompatGeckoDesktop("2.0") }}</td>
<td>8 (or earlier)</td>
<td>{{ CompatUnknown() }}</td>
<td>5.0</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatGeckoMobile("1.0") }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
</tbody>
</table>
</div>
<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>
|
