必须按:link→:visited→:hover→:active顺序书写，否则:hover等后续伪类会被前面的同权值声明覆盖而失效；该顺序是浏览器层叠解析的硬性规则，反映从稳定态到瞬时态的状态优先级链。
必须按 :link → :visited → :hover → :active 顺序写，否则样式会失效——这不是建议，是浏览器解析规则决定的。
为什么顺序错就看不到 :hover 效果？
CSS 伪类本身权值相同（都是元素选择器 + 伪类），浏览器靠声明顺序决定覆盖关系。如果把 :hover 写在 :visited 前面，而用户点过的链接又匹配 :visited，那后续所有同权值声明都会被它压住——:hover 就根本不会生效。
常见错误现象：
- 未访问链接悬停变色正常，已访问链接悬停无反应
- 鼠标按下瞬间没颜色变化（
:active被:hover挡住了）
实操建议：
- 永远把
:link放最前（它是所有链接的“默认态”基础） -
:visited必须紧随其后（它只对已访问链接生效，但权值不比:link高） -
:hover和:active是临时态，要排在状态更“持久”的后面
:visited 的限制比你想的还多
:visited 不是普通伪类：出于隐私保护，现代浏览器严格限制它能设置的 CSS 属性。你只能改：color、background-color、border-color、outline-color，以及几个 text- 开头的属性（如 text-decoration-color）。其他任何改动（比如 display、font-size、transform）都会被忽略。
这意味着：
- 别试图用
:visited控制布局或动画 -
:visited里不能写transition，否则整个规则可能被丢弃 - 如果用了
!important，它只在允许的属性上生效，其余照样无效
LVHA 顺序不是记忆口诀，是层叠逻辑链
“爱恨原则（LVHA）”听着轻松，但背后是明确的状态流转：
-
:link：链接存在且未访问 → 初始态 -
:visited：链接被访问过 → 持久态（一旦设为 visited，除非清记录，否则一直生效） -
:hover：鼠标移入 → 瞬时态（可叠加在 link 或 visited 上） -
:active：鼠标按下 → 更短瞬时态（必须能穿透 hover 才看得见）
所以顺序本质是「从稳定到临时」的优先级递进。如果你把 :active 写在 :hover 前面，按下瞬间样式会立刻被 hover 覆盖——因为 hover 还在持续，而 active 只存在毫秒级。
真正容易被忽略的点：哪怕你只用 :link 和 :visited，也得按 LVHA 写全；只要漏掉中间某个，后续伪类就可能因层叠失效。这不是冗余，是 CSS 规则引擎的硬性要求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
