---
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>/* 所有被访问过的 &lt;a&gt; 变绿 */
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>&lt;a href="#test-visited-link"&gt;你是否访问过此链接？&lt;/a&gt;
&lt;a href=""&gt;你已经访问过此链接。&lt;/a&gt;</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>