在使用CSS设置已访问链接的样式时，很多开发者会遇到visited伪类不起作用的情况，这背后涉及浏览器隐私策略、CSS规则限制等多方面因素，需要从多个维度排查问题。
visited伪类的基本使用规则
visited是CSS中用于匹配用户已访问过的链接的伪类，基本语法如下：
/* 未访问链接样式 */
a:link {
color: #0066cc;
}
/* 已访问链接样式 */
a:visited {
color: #993399;
}
/* 鼠标悬停链接样式 */
a:hover {
color: #ff6600;
}
/* 点击时链接样式 */
a:active {
color: #cc0000;
}
visited不起作用的常见原因
1. 浏览器隐私策略限制
现代浏览器为了防止网站通过visited伪类探测用户的浏览历史，对visited可设置的CSS属性做了严格限制。目前仅允许设置以下属性：
- color
- background-color
- border-color
- outline-color
- 列的stroke-color和fill-color属性
如果尝试设置width、height、font-size、padding等属性，浏览器会直接忽略这些规则，导致visited样式看起来不起作用。
2. 选择器优先级不足
如果其他选择器对链接的样式优先级高于a:visited，那么visited的样式会被覆盖。比如以下代码中，类选择器的优先级高于伪类：
/* 类选择器优先级更高，会覆盖visited的样式 */
.link-item {
color: #333333;
}
a:visited {
color: #993399;
}
可以通过提高visited选择器的优先级解决，比如使用更具体的选择器：
/* 更具体的选择器，优先级更高 */
a.link-item:visited {
color: #993399;
}
3. 链接没有正确的href属性
visited伪类仅对带有有效href属性的<a>标签生效，如果链接是javascript:void(0)或者没有href属性，浏览器不会将其识别为可访问链接，也就不会触发visited状态。
<!-- 以下链接不会触发visited状态 --> <a href="javascript:void(0)">无效链接</a> <a>没有href的链接</a> <!-- 以下链接可以触发visited状态 --> <a href="https://ipipp.com">有效链接</a>
4. 本地文件访问的限制
在本地通过file协议打开HTML文件时，部分浏览器会禁用visited伪类的效果，这是为了避免本地文件获取用户的浏览记录。可以将文件部署到本地服务器，通过http协议访问来测试visited样式。
5. 浏览历史中不存在该链接
visited伪类仅在链接已经被用户访问过的情况下才会生效，如果链接是第一次打开，或者用户清除了浏览历史，那么visited样式不会触发。可以先访问一次目标链接，再刷新页面测试效果。
排查步骤总结
遇到visited不起作用时，可以按照以下步骤排查：
- 先检查设置的CSS属性是否属于浏览器允许的范围，避免设置禁止的属性
- 检查visited选择器的优先级是否足够，是否被其他样式覆盖
- 确认<a>标签带有有效的href属性，且不是javascript伪协议
- 确认是否通过http协议访问页面，排除本地file协议的限制
- 确认链接已经被访问过，且浏览历史没有被清除
只要按照上述思路逐一排查，基本都能找到visited样式失效的原因并解决问题。