CSS :visited 选择器
CSS :visited 伪类表示用户已访问过的链接。出于隐私原因，可以使用此选择器修改的样式非常有限。
实例
选择已访问的链接，并设置其样式：
<!DOCTYPE html><html><head><style>a:visited {color: pink;}</style></head><body><a href="https://cankaoshouce.com">cankaoshouce 主页</a><br><a href="https://cankaoshouce.com/html/html-course.html">Html 教程</a><br><a href="https://cankaoshouce.com/css/css-course.html">CSS 教程</a><p><b>注意：</b>:visited 的选择器设置了您已经访问过的链接的样式。</p></body></html>
浏览器支持
表格中的数字注明了完全支持该选择器的首个浏览器版本。
| 选择器 | |||||
|---|---|---|---|---|---|
| :visited | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 |
定义和用法
:visited 选择器用于选取已被访问的链接。
提示：请使用 :link 选择器对指向未被访问页面的链接设置样式, :hover 选择器用于设置鼠标指针浮动到链接上时的样式，:active 选择器用于设置点击链接时的样式。
由于安全性问题，浏览器支持的 :visited 链接的样式有限。
支持的样式有：
- color
- background-color
- border-color (也可以是每条边)
- outline color
- column-rule-color
- fill 和 stroke 的一部分
备注：这个样式可能会被后声明的其他链接相关的伪类覆盖，这些伪类包括 (:link, :hover,和:active)。要适当地设置链接样式，请将:visited 规则放在:link 规则之后，但在:hover 和:active。
实例
例子 1
选择未访问、已访问、悬浮和活动链接，并设置它们的样式：
<!DOCTYPE html><html><head><style>a:visited{background-color:yellow;}</style></head><body><a href="https://cankaoshouce.com">cankaoshouce</a><a href="http://www.google.com">Google</a><a href="http://www.wikipedia.org">Wikipedia</a><p><b>注释：</b>:visited 选择器为已被访问的链接设置样式。</p></body></html>
例子 2
为链接设置不同的样式：
<!DOCTYPE html><html><head><style>a.ex1:hover, a.ex1:active {color: red;}a.ex2:hover, a.ex2:active {font-size: 150%;}a.ex3:hover, a.ex3:active {background: red;}a.ex4:hover, a.ex4:active {font-family: monospace;}a.ex5:visited, a.ex5:link {text-decoration: none;}a.ex5:hover, a.ex5:active {text-decoration: underline;}</style></head><body><p>将鼠标移到链接上可以看到它们更改布局。</p><p><a class="ex1" href="/css/css-course.html">这个链接改变颜色。</a></p><p><a class="ex2" href="/css/css-course.html">这个链接改变字体大小。</a></p><p><a class="ex3" href="/css/css-course.html">这个链接改变背景颜色。</a></p><p><a class="ex4" href="/css/css-course.html">这个链接改变字体。</a></p><p><a class="ex5" href="/css/css-course.html">这个链接改变文本装饰。</a></p></body></html>
相关页面
CSS 教程：CSS 链接
CSS 教程：CSS 伪类