伪类链接样式不生效通常因声明顺序错误，必须严格遵循LVHA顺序（:link→:visited→:hover→:active），否则:hover会被覆盖；还需检查特异性冲突和:visited限制，并建议统一设置各状态下的:hover效果。
伪类链接样式不生效，通常不是 css 写错了，而是 a:hover 和其他伪类（如 :link、:visited、:active）的声明顺序不对。浏览器会按“层叠规则”覆盖样式，顺序错误会导致 hover 效果被后续规则覆盖或压根不触发。
必须遵守 LVHA 顺序
链接的四个常用伪类要严格按以下顺序书写，缺一不可，否则 hover 可能失效：
- :link —— 未访问过的链接
- :visited —— 已访问过的链接
- :hover —— 鼠标悬停时
- :active —— 链接被点击的瞬间
正确写法示例：
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; text-decoration: underline; }
a:active { color: orange; }
避免 :hover 被 :visited 或其他规则覆盖
:visited 有安全限制（只能设置有限样式，如 color、background-color），但它仍可能影响颜色继承；如果 :visited 写在 :hover 后面，且设置了 color，就会覆盖 hover 的颜色。
立即学习“前端免费学习笔记（深入）”；
检查你的 CSS 中是否出现类似这样错误的顺序：
a:hover { color: red; }
a:visited { color: gray; } ← 这里会覆盖 hover 的颜色！
修正方法：把 :visited 移到 :hover 前面，并确保 hover 规则位置靠后（LVHA）。
注意选择器特异性冲突
即使顺序对了，如果其他更具体的选择器（比如 .nav a:hover 或 div a:hover）也定义了 hover 样式，而你写的 a:hover 特异性更低，也会被覆盖。
排查建议：
- 打开浏览器开发者工具（F12），选中链接元素，看“Styles”面板里哪条 :hover 规则被划掉（即被覆盖）
- 对比各规则的特异性值，必要时提高你 hover 规则的优先级，例如用 a.nav-link:hover 替代 a:hover
- 避免滥用 !important，优先通过调整顺序和选择器精度解决
确保 html 中链接状态符合预期
:link 和 :visited 依赖浏览器历史记录。刚打开页面时，新链接默认是 :link 状态；点过一次后变成 :visited。如果你在测试 hover，但链接已被访问过，而 :visited 规则又没设 hover 效果，那悬停可能“看起来没反应”——其实是 :visited 下的 hover 没定义。
建议统一为所有状态都设置 hover，例如：
a:link:hover,
a:visited:hover,
a:focus:hover {
color: #e74c3c;
text-decoration: underline;
}
这样无论是否访问过，悬停效果都一致，也更健壮。