:visited 选择器选择页面中访问过的链接并设置样式。
:visited 伪类在用户访问过链接时应用。
如果我们尝试通过给访问的链接添加样式属性(例如,背景图像)来为访问的链接添加样式,那么它在现代浏览器中将不起作用。
但是如果我们使用任何其他伪类,样式属性将正常工作。
使用此选择器修改的样式非常有限。
浏览器允许以下样式:
- 颜色
- 背景颜色
- 边框颜色
- 轮廓颜色
- 列规则颜色
- 填充和描边的颜色部分
Web 浏览器可以选择忽略 :link 和 :visited 伪类的规则样式,因为 :visited 伪类可能会被滥用,并且可以从访问者的浏览器历史记录中获取信息。
语法
:visited {
css declarations;
}
:visited 选择器示例:
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
a {
display: block;
padding: 5px;
}
a:visited {
color: #8ebf42;
}
</style>
</head>
<body>
<h2>:visited selector example</h2>
<a href="https://www.onitroad.com">onitroad</a>
<a href="https://stackdev.io/">Stackdev</a>
</body>
</html>
带有未访问、已访问、悬停和活动链接的 :visited 选择器示例:
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
p {
font-size: 20px;
}
/* unvisited link */
a:link {
color: #cccccc;
}
/* visited link */
a:visited {
color: #1c87c9;
}
/* mouse over link */
a:hover {
color: #8ebf42;
}
/* selected link */
a:active {
color: #666666;
}
</style>
</head>
<body>
<h2>:visited selector example</h2>
<p>Visit our
<a href="https://www.onitroad.com/">website</a>.
</p>
</body>
</html>
日期:2020-06-02 22:14:51 来源:oir作者:oir
