链接伪类执行顺序

a 标签四个伪类 :link、:visited、:hover、:active 的正确书写顺序

问题

a 标签上四个伪类的执行顺序是怎么样的？

解答

a 标签的四个伪类必须按照 LVHA 顺序书写：

:link - 未访问的链接
:visited - 已访问的链接
:hover - 鼠标悬停
:active - 激活状态（点击时）

记忆口诀

LoVe HAte（爱恨）—— L V H A

代码示例

/* 正确顺序：LVHA */
a:link {
  color: blue;        /* 未访问：蓝色 */
}

a:visited {
  color: purple;      /* 已访问：紫色 */
}

a:hover {
  color: red;         /* 悬停：红色 */
}

a:active {
  color: orange;      /* 点击时：橙色 */
}

为什么顺序重要？

CSS 选择器优先级相同时，后面的样式会覆盖前面的。如果顺序错误：

/* 错误顺序 */
a:hover {
  color: red;
}

a:link {
  color: blue;
}

/* 问题：hover 效果被 link 覆盖，悬停时不会变红 */

完整示例

<!DOCTYPE html>
<html>
<head>
  <style>
    a:link    { color: blue; }
    a:visited { color: purple; }
    a:hover   { color: red; text-decoration: underline; }
    a:active  { color: orange; }
  </style>
</head>
<body>
  <a href="https://example.com">示例链接</a>
</body>
</html>

关键点

顺序是 :link → :visited → :hover → :active（LVHA）
记忆口诀：LoVe HAte
顺序错误会导致样式被覆盖，hover 或 active 效果失效
原因是 CSS 同优先级下，后定义的规则覆盖先定义的
实际开发中可只写需要的伪类，但相对顺序要保持