a:link匹配未访问过的链接,用于设置默认样式;a:visited匹配已访问过的链接,用于设置点击后的样式。两者区别在于匹配条件不同:1. a:link仅适用于未被点击或浏览器未记录的链接,一旦点击后便不再匹配;2. a:visited在用户访问过链接并被浏览器记录后生效,但现代浏览器出于隐私保护限制了其可设置的样式属性;3. 使用时应注意书写顺序(a:link → a:visited → a:hover → a:active),避免状态覆盖;4. 不可用于获取用户浏览历史,且兼容性需测试;5. 常用于导航菜单或文章推荐中区分已读与未读状态。

a:link 和 a:visited 是 CSS 中用于控制超链接样式的两个动态伪类选择器,它们的区别主要体现在匹配的条件不同。

a:link —— 匹配未访问过的链接
这个伪类匹配的是用户还没有点击过、浏览器也没有记录访问历史的链接。通常用它来设置链接的默认样式。
比如:
立即学习“前端免费学习笔记(深入)”;

a:link {
color: blue;
}这样设置之后,页面上所有还没被访问过的链接都会显示为蓝色。
需要注意:
a:visited —— 匹配已经访问过的链接
这个伪类匹配的是用户已经访问过的链接。一旦链接被点击并且浏览器记录了该 URL 的访问历史,它就会匹配 a:visited 规则。
例如:
a:visited {
color: purple;
}这段代码会让用户已经访问过的链接变成紫色。
但要注意:
- 出于隐私保护的原因,现代浏览器对
a:visited可以设置的样式做了限制,不能随意修改某些属性(比如background-image或者text-shadow) - 不同浏览器可能在支持程度上略有差异,测试时要留意兼容性问题
使用建议和注意事项
为了保证链接状态的样式能正确应用,有几个小技巧可以记住:
-
顺序很重要:通常建议按照
a:link→a:visited→a:hover→a:active这个顺序写 CSS,否则某些状态可能被覆盖 -
不要试图绕过浏览器限制:比如想通过
a:visited获取用户的浏览历史,这是行不通的,浏览器已经对此类行为做了严格限制 -
可以用在导航菜单或文章推荐中:比如你希望用户知道哪些文章他们已经读过了,就可以通过
a:visited把这些链接标灰或者加一个标记
总结一下
简单来说,:link 是“没点过的”,:visited 是“点过的”。两者配合使用,可以让你的网站链接更有状态感,也能提升用户体验。不过因为浏览器安全机制的存在,在样式自由度上会有些限制。
基本上就这些。










