CSS伪类:visited与:link如何区分访问链接_使用:visited :link设置不同访问状态颜色

新闻中心 NEWS CENTER

2025-11-22

浏览次数：次

正确使用CSS的:link和:visited伪类可区分未访问和已访问链接，提升用户体验；需遵循LVHA顺序避免样式覆盖，并注意浏览器对:visited样式的安全限制。

css伪类:visited与:link如何区分访问链接_使用:visited :link设置不同访问状态颜色

在网页设计中，为了让用户清楚地区分哪些链接已经访问过，哪些还没有，可以通过CSS的 :link 和 :visited 伪类来设置不同颜色。这两个伪类分别代表链接的不同状态，正确使用它们可以提升用户体验。

:link 用于设置尚未被用户点击过的超链接样式；:visited 则用于设置用户已经访问过的链接样式。两者都只能应用于带有 href 属性的 <a></a> 标签。

常见用法如下：

a:link {
    color: blue;     /* 未访问的链接为蓝色 */
}
a:visited {
    color: purple;   /* 已访问的链接变为紫色 */
}

为了确保样式正确生效，推荐遵循“LVHA”顺序（Link → Visited → Hover → Active）。如果顺序错误，可能导致某些样式被覆盖。

正确示例：

a:link    { color: blue; }
a:visited { color: green; }
a:hover   { color: red; }
a:active  { color: orange; }

若将 a:visited 写在 a:link 后面，可能会导致未访问链接也显示为已访问的颜色，因为后定义的规则优先级更高。

Avatar AI

AI成像模型，可以从你的照片中生成逼真的4K头像

92 查看详情 Avatar AI

出于隐私保护，现代浏览器对 :visited 可修改的样式做了限制。虽然可以更改颜色，但不能通过J*aScript获取是否为已访问链接，也不能读取这些样式的计算值。

允许设置的属性包括：

其他大多数外观属性在 :visited 中可能无效或被忽略。

基本上就这些。只要按规范写好选择器顺序，并理解浏览器的安全策略，就能轻松实现链接状态的颜色区分。不复杂但容易忽略细节。

以上就是CSS伪类:visited与:link如何区分访问链接_使用:visited :link设置不同访问状态颜色的详细内容，更多请关注其它相关文章！