如何使用CSS实现link与visited伪类_超链接状态样式

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何使用CSS实现link与visited伪类_超链接状态样式

2025-11-21

浏览次数：次

返回列表

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

如何使用css实现link与visited伪类_超链接状态样式

要使用CSS设置超链接的不同状态样式，可以通过 :link 和 :visited 伪类来分别定义未访问和已访问链接的外观。这两个伪类是CSS中专门用于控制 <a></a> 标签在不同状态下的样式的工具。

1. :link 伪类 — 设置未访问链接的样式

:link 用于选择所有未被用户点击过的超链接。只有当链接的 href 属性存在且尚未被访问时，该样式才会生效。

示例：

a:link {
    color: blue;
    text-decoration: underline;
}

这段代码会让所有未访问的链接显示为蓝色并带下划线。

2. :visited 伪类 — 设置已访问链接的样式

:visited 用于选择用户已经点击并访问过的链接。出于隐私保护的原因，现代浏览器对 :visited 可修改的样式属性有所限制。

可安全使用的样式包括：

color
background-color
border-color
outline-color

注意：不能通过 :visited 获取原始背景图片或字体信息，也不能使用透明颜色间接探测访问历史。

Waifulabs

一键生成动漫二次元头像和插图

317 查看详情 Waifulabs

示例：

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;
}