LVHA顺序是CSS层叠引擎强制规则::link→:visited→:hover→:active,因同权值伪类按声明顺序覆盖,错序会导致:hover/:active被:visited覆盖失效,且现代浏览器限制:visited仅能修改少数属性。

因为浏览器按声明顺序解析同权值伪类,顺序错会导致:hover、:active等瞬时态样式被:visited永久态覆盖而完全不生效。
为什么:hover写在:visited前面就失效
所有链接伪类 :link、:visited、:hover、:active 的选择器权值完全相同(都属于“元素 + 伪类”级别),浏览器不靠权重判断,只看谁写在后面——后声明的覆盖先声明的。
常见错误现象:
- 未访问链接悬停变色正常,已访问链接悬停无反应
- 鼠标按下瞬间看不到
:active样式(被:hover挡住了) - 清空浏览器历史后问题消失,说明是
:visited规则干扰了后续状态
实操建议:
立即学习“前端免费学习笔记(深入)”;
- 永远把
:link放最前——它是所有链接的初始态基础 -
:visited必须紧随其后——它不比:link权重高,但一旦匹配就长期生效 -
:hover和:active是临时态,必须排在更“稳定”的状态之后,才能穿透生效
:visited 的限制远不止顺序问题
现代浏览器出于隐私保护,对 :visited 能设置的 CSS 属性做了硬性封禁:
- 只允许修改:
color、background-color、border-color、outline-color、text-decoration-color等极少数属性 - 禁止修改:
display、font-size、transform、visibility、transition等任何可能被用于探测用户浏览历史的属性 - 如果规则里混入了非法属性(比如
:visited { color: red; transform: scale(1.1); }),整个规则会被浏览器直接丢弃,连合法属性也不执行
这意味着:别试图用 :visited 做动画、布局切换或 JS 交互钩子;加了 !important 也救不回被禁的属性。
LVHA 不是记忆口诀,是层叠引擎的硬性规则链
这个顺序本质反映的是状态生命周期的优先级递进:
-
:link→ 链接存在且未访问(初始态) -
:visited→ 链接已被访问(持久态,除非清记录否则一直生效) -
:hover→ 鼠标移入(瞬时态,可叠加在 link/visited 上) -
:active→ 鼠标按下(毫秒级瞬时态,必须能穿透 hover 才可见)
真正容易被忽略的点:哪怕你只用 :link 和 :visited,也得把 :hover 和 :active 写全并按序排列;只要中间缺一个,后续伪类就可能因层叠断链而失效——这不是冗余,是 CSS 规则引擎强制要求的解析路径。


















