在网页开发中，链接是承载页面跳转和交互的核心元素，默认的链接样式中，访问过的链接会呈现紫色，未访问的是蓝色，这种默认效果很多时候和整体页面设计风格不匹配。css的visited伪类就是专门用来控制已访问链接样式的属性，通过它我们可以自定义链接访问后的颜色变化，同时和其他状态的链接样式做区分。
visited伪类的基本用法
visited伪类需要和a标签配合使用，它会自动匹配所有用户已经访问过的链接元素，我们可以在其中设置对应的样式属性。需要注意的是，visited伪类只能修改部分css属性，这是浏览器的安全限制，避免网站通过样式判断用户的浏览历史。
基础样式设置示例
下面是一个简单的示例，展示如何设置未访问、已访问、悬停、激活四种状态的链接样式：
/* 未访问的链接样式 */
a:link {
color: #333333;
text-decoration: none;
}
/* 已访问的链接样式，使用visited伪类 */
a:visited {
color: #666666;
text-decoration: line-through;
}
/* 鼠标悬停时的链接样式 */
a:hover {
color: #ff4400;
text-decoration: underline;
}
/* 链接被点击激活时的样式 */
a:active {
color: #ff0000;
}
visited伪类的使用限制
由于浏览器的隐私保护机制，visited伪类能够修改的css属性非常有限，目前主流浏览器仅支持以下属性：
- color：文字颜色
- background-color：背景颜色
- border-color：边框颜色（包含border-bottom-color、border-left-color等子属性）
- outline-color：轮廓颜色
- column-rule-color：多列布局的分隔线颜色
如果尝试在visited伪类中设置其他属性，比如font-size、width、padding等，这些设置是不会生效的，浏览器会直接忽略这些不符合规范的属性。
多个链接状态的组合使用
链接的四种状态有固定的书写顺序，否则可能会出现样式覆盖的问题，正确的顺序为：link -> visited -> hover -> active，可以简记为LOVE HATE原则（Link、Visited、Hover、Active）。
下面是一个更符合实际开发场景的示例，同时设置了链接的四种状态，并且保证了样式的正常生效：
/* 基础链接样式 */
a {
font-size: 14px;
transition: color 0.2s ease;
}
/* 未访问链接 */
a:link {
color: #165dff;
}
/* 已访问链接，利用visited伪类设置颜色 */
a:visited {
color: #86909c;
}
/* 悬停状态 */
a:hover {
color: #4080ff;
}
/* 激活状态 */
a:active {
color: #0e42d2;
}
常见问题解答
为什么visited伪类设置的样式不生效？
首先检查是否违反了浏览器的属性限制，不要在visited中设置不支持的属性。其次检查样式顺序是否正确，如果visited写在了link前面，可能会被后续的link样式覆盖。另外如果链接的href属性和当前页面域名不匹配，或者链接指向的地址没有被访问过，visited样式也不会触发。
可以清除visited伪类的样式吗？
可以，只需要将visited伪类中的样式设置和link伪类保持一致即可，这样访问前后的链接样式就不会有差异，相当于清除了访问后的样式变化。
注意：visited伪类的样式是基于用户本地浏览器的历史记录生效的，不同用户的访问记录不同，看到的链接状态也会不同，开发测试时可以通过浏览器的历史记录管理功能清除访问记录，来测试不同状态下的样式效果。