Frontend►CSS

014-`CSS` 链接伪类（LVHA）

CSS 链接伪类详解：:link, :visited, :hover, :active

这四个伪类是专门用于定义超链接（<a> 标签）不同状态的样式，被称为 LVHA 顺序（或 LoVe-HAte 记忆法）。

1. 各伪类含义

伪类 描述 典型用途
:link 选择未被访问过的链接 设置默认链接样式
:visited 选择已被访问过的链接（基于浏览器历史记录） 区分已读/未读链接
:hover 选择鼠标悬停时的链接 添加悬停反馈效果
:active 选择被激活时的链接（鼠标按下但未释放时） 显示点击瞬间的反馈

2. 正确顺序的重要性

必须按照 LVHA 顺序 定义样式（:link → :visited → :hover → :active），否则某些样式可能不会生效。这是因为CSS的层叠规则。

记忆口诀：LoVe-HAte (L-V-H-A)

1
2
3
4
5
/* 正确顺序示例 */
a:link { color: blue; }      /* 未访问链接 - 蓝色 */
a:visited { color: purple; } /* 已访问链接 - 紫色 */
a:hover { color: red; }      /* 鼠标悬停 - 红色 */
a:active { color: orange; }  /* 点击瞬间 - 橙色 */

3. 浏览器安全限制

出于隐私考虑，现代浏览器对 :visited 伪类有严格限制：

  • 只能修改 color, background-color, border-color 等颜色相关属性
  • 不能获取 :visited 样式通过 JavaScript（防止检测用户浏览历史）

4. 实际应用示例

基础链接样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
a:link {
  color: #0066cc;
  text-decoration: none;
}

a:visited {
  color: #6699cc;
}

a:hover {
  text-decoration: underline;
  color: #ff6600;
}

a:active {
  color: #ff0000;
}

按钮式链接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
a:link, a:visited {
  display: inline-block;
  padding: 10px 20px;
  background: #4CAF50;
  color: white;
  border-radius: 4px;
  transition: background 0.3s;
}

a:hover {
  background: #45a049;
}

a:active {
  background: #3e8e41;
  transform: translateY(1px);
}

5. 注意事项

  1. 非 <a> 标签：这些伪类也可用于其他有 href 属性的元素（如 <area>）
  2. 移动设备：:hover 在触摸屏上表现不同（通常需要实际点击才会触发）
  3. 优先级：如果顺序错误，后定义的规则可能覆盖前面的规则
  4. 简写写法：单独写 a {...} 会同时影响所有状态，通常不建议

6. 扩展伪类

现代CSS还新增了：

  • :focus - 键盘聚焦时的样式（应放在 :hover 之后）
  • :focus-visible - 仅当键盘聚焦时生效（避免鼠标点击时的焦点样式）

完整推荐顺序：

1
a:link → a:visited → a:hover → a:focus → a:active