在CSS中，a:link与a:visited是两个常用的链接伪类，分别用于定义未访问链接和已访问链接的样式。通过它们配合，我们可以清晰区分用户是否点开过某个链接，从而优化页面导航体验。
基础用法与书写顺序
按照CSS规范，链接伪类建议按访问前与访问后的顺序书写，且由于层叠规则，后写的样式在相同优先级下会覆盖先写的。通常我们将a:link放在前面，a:visited放在其后。
/* 未访问链接显示为蓝色 */
a:link {
color: #0066cc;
text-decoration: none;
}
/* 已访问链接显示为紫色 */
a:visited {
color: #663399;
text-decoration: none;
}
visited伪类的样式限制
现代浏览器为保护用户隐私，严格限制了a:visited所能修改的CSS属性。一般只允许设置颜色相关的少数属性，例如color、background-color、border-color等，而不能改变字体大小或布局结构。
| 属性类型 | 是否允许在visited中修改 |
|---|---|
| color | 允许 |
| background-color | 允许 |
| font-size | 不允许 |
| display | 不允许 |
配合其他伪类增强效果
虽然link与visited控制颜色状态，但常配合a:hover与a:active使用，形成完整的链接交互反馈。推荐顺序为link、visited、hover、active。
a:link { color: #0066cc; }
a:visited { color: #663399; }
a:hover { color: #ff6600; }
a:active { color: #cc0000; }
常见误区与排查
- 忘记写
a:link导致默认蓝色覆盖visited样式 - 在visited中使用了不被允许的属性，样式无效
- 优先级冲突，例如用类选择器覆盖了伪类颜色
若发现已访问链接颜色不生效，可检查是否有更高优先级的规则，或是否误用了布局类属性。利用浏览器开发者工具查看computed样式即可快速定位。
提示：若需清除本地已访问记录以测试样式，可在浏览器历史中删除对应站点记录。
完整示例
以下为一个简单的HTML配合CSS演示，展示link与visited控制颜色的写法。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
a:link { color: #0066cc; }
a:visited { color: #663399; }
</style>
</head>
<body>
<a href="https://ipipp.com">示例链接</a>
</body>
</html>
通过上述方式，即可在CSS中利用visited与link伪类稳定控制链接颜色，提升页面可用性与视觉层次。