:visited
:visited CSS 伪类在用户访问过链接后应用。出于隐私原因，可以使用此选择器修改的样式非常有限。:visited 伪类仅适用于具有 href 属性的 <a> 和 <area> 元素。
试一试
p {
font-weight: bold;
}
a:visited {
color: forestgreen;
text-decoration-color: hotpink;
}
<p>Pages that you might have visited:</p>
<ul>
<li>
<a href="https://mdn.org.cn">MDN Web Docs</a>
</li>
<li>
<a href="https://www.youtube.com/">YouTube</a>
</li>
</ul>
<p>Pages unlikely to be in your history:</p>
<ul>
<li>
<a href="https://mdn.org.cn/missing-1">Random MDN page</a>
</li>
<li>
<a href="https://example.com/missing-1">Random Example page</a>
</li>
</ul>
由 :visited 和未访问的 :link 伪类定义的样式，可以被任何后续具有至少相同特异性的用户操作伪类（:hover 或 :active）覆盖。为了正确设置链接样式，请按照 LVHA-order（:link — :visited — :hover — :active）将 :visited 规则置于 :link 规则之后，但在 :hover 和 :active 规则之前。:visited 伪类和 :link 伪类是互斥的。
隐私限制
出于隐私原因，浏览器严格限制了你可以使用此伪类应用的样式，以及它们的使用方式
- 允许的 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状态的 alpha 分量。在 Firefox 中，当 alpha 分量为0时，:visited中设置的样式将完全被忽略。 - 尽管这些样式可以改变最终用户的颜色外观，但
window.getComputedStyle方法会“撒谎”，并始终返回非:visited颜色的值。 <link>元素永远不会被:visited匹配。- 通过 CSS 选择器匹配元素的 DOM 方法，例如
querySelector()和querySelectorAll()，即使文档中存在已访问的链接，也始终返回“空”结果。对于上述方法，这将分别是null或一个空的NodeList。
注意： 有关这些限制及其原因的更多信息，请参阅 隐私与 :visited 选择器。
语法
css
:visited {
/* ... */
}
示例
原本没有颜色或透明的属性不能用 :visited 修改。在可以使用此伪类设置的属性中，你的浏览器可能只为 color 和 column-rule-color 设置了默认值。因此，如果你想修改其他属性，你需要为它们在 :visited 选择器之外提供一个基本值。
HTML
html
<a href="#test-visited-link">Have you visited this link yet?</a><br />
<a href="">You've already visited this link.</a>
CSS
css
a {
/* Specify non-transparent defaults to certain properties,
allowing them to be styled with the :visited state */
background-color: white;
border: 1px solid white;
}
a:visited {
background-color: yellow;
border-color: hotpink;
color: hotpink;
}
结果
规范
| 规范 |
|---|
| HTML # selector-visited |
| 选择器 Level 4 # visited-pseudo |
浏览器兼容性
加载中…
另见
- 隐私与 :visited 选择器
- 与链接相关的伪类：
:link、:active、:hover