: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