link与visited伪类区别详解

想要让你的网站链接更具状态感，提升用户体验吗？CSS中的`a:link`和`a:visited`伪类选择器可以帮你实现！`a:link`用于设置**未访问过**的链接的默认样式，让它们在用户点击前呈现特定效果。而`a:visited`则针对**已访问过**的链接，标识用户已浏览的内容。但要注意，出于隐私保护，现代浏览器对`a:visited`可设置的样式有所限制。使用时需注意书写顺序，遵循`a:link -> a:visited -> a:hover -> a:active`的规则，避免样式覆盖。它们常被用于导航菜单或文章推荐中，区分已读和未读状态，提高用户浏览效率。了解并合理运用这两个伪类，能让你的网站更富交互性，给用户带来更好的体验。

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:link
• 它只适用于 标签带有 href 属性的情况，不带 href 的锚点不会被匹配

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 是“点过的”。两者配合使用，可以让你的网站链接更有状态感，也能提升用户体验。不过因为浏览器安全机制的存在，在样式自由度上会有些限制。

基本上就这些。

到这里，我们也就讲完了《link与visited伪类区别详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！