使用:link和:visited可设置超链接不同状态样式,1. :link定义未访问链接如a:link{color:blue;},2. :visited定义已访问链接如a:visited{color:purple;},需注意浏览器隐私限制,3. 按LVHA顺序(:link、:visited、:hover、:active)书写避免覆盖,提升导航体验。

要使用CSS设置超链接的不同状态样式,可以通过 :link 和 :visited 伪类来分别定义未访问和已访问链接的外观。这两个伪类是CSS中专门用于控制 标签在不同状态下的样式的工具。
1. :link 伪类 — 设置未访问链接的样式
:link 用于选择所有未被用户点击过的超链接。只有当链接的 href 属性存在且尚未被访问时,该样式才会生效。
a:link {
color: blue;
text-decoration: underline;
}
这段代码会让所有未访问的链接显示为蓝色并带下划线。
2. :visited 伪类 — 设置已访问链接的样式
:visited 用于选择用户已经点击并访问过的链接。出于隐私保护的原因,现代浏览器对 :visited 可修改的样式属性有所限制。
立即学习“前端免费学习笔记(深入)”;
可安全使用的样式包括:- color
- background-color
- border-color
- outline-color
注意:不能通过 :visited 获取原始背景图片或字体信息,也不能使用透明颜色间接探测访问历史。
a:visited {
color: purple;
}
这样,用户访问过的链接会变成紫色。
3. 推荐的书写顺序(LVHA原则)
为了确保样式正确应用,建议按照以下顺序定义链接状态,也称为“LVHA法则”:
- :link — 未访问
- :visited — 已访问
- :hover — 鼠标悬停
- :active — 正在点击
a:link {
color: #0000EE;
}
a:visited {
color: #8B008B;
}
a:hover {
color: red;
text-decoration: none;
}
a:active {
color: orange;
}
这个顺序可以避免样式覆盖问题,保证用户体验一致。
基本上就这些。合理使用 :link 和 :visited 能让网站的导航更清晰,提升用户的浏览体验。记得遵循LVHA顺序,并注意浏览器对 :visited 的样式限制。










