:hover 选择器需遵循 LVHA 顺序、优先级规则及设备兼容性：必须同时声明 a:link、a:visited、a:hover、a:active，避免被覆盖；内联样式或 !important 会干扰，移动端需用 @media(hover: hover) 或 :active 模拟。
直接写 :hover 选择器就能改链接颜色，但必须注意优先级和继承规则
浏览器默认的 a:hover 颜色是蓝色（或系统主题色），想自定义，最简方式就是显式声明：
a:hover {color: #ff6b35;}但实际常无效——不是语法错，而是 CSS 优先级被其他规则覆盖了。比如你写了 .nav-link:hover 却没生效，大概率是它被 a 标签上更早定义的 color（带 !important）或父级 color 继承压住了。
必须同时设置 a:link、a:visited、a:hover、a:active 才能稳定生效
这是历史遗留行为：CSS 规范要求这四个伪类按 LVHA 顺序声明（Link → Visited → Hover → Active），否则 :hover 可能被 :visited 覆盖（尤其在已访问过的链接上）。常见错误是只写 :hover，结果悬停时颜色一闪就回退。
- 正确顺序示例：
a:link {color: #333;}<br>a:visited {color: #666;}<br>a:hover {color: #007bff;}<br>a:active {color: #0056b3;} - 如果用 class 控制，记得把伪类加在 class 后面：
.btn-primary:hover，而不是:hover.btn-primary - 现代项目中，用
all: unset重置后再设会更可控，但需谨慎——它会清掉所有继承样式
内联样式或 !important 会让 :hover 失效
HTML 中写 <a href="#" style="color: red"> 链接 </a> 时，内联样式的优先级高于外部 CSS 的 :hover，导致悬停不生效。同理，若基础 a 规则用了 !important，:hover 也得加才能覆盖。
- 避免内联 color：把颜色逻辑全收进 CSS 文件或
<style>块里 - 真要用
!important，确保 hover 和基础状态都加，且保持一致 - 检查 DevTools 的 Computed 面板，看哪条
color被标记为“overridden”—— 那就是冲突源头
移动端需要额外处理 :hover 的触发时机
iOS Safari 和部分安卓浏览器默认不支持 hover，触屏设备第一次点击后才触发 :hover，第二次点才真正跳转，体验割裂。这不是 bug，是规范行为。
立即学习 “ 前端免费学习笔记（深入）”；
- 方案一：用
@media (hover: hover)包裹 hover 规则，让触屏设备跳过它@media (hover: hover) {<br> a:hover { color: #e74c3c;}<br>} - 方案二：对触屏设备改用
:active模拟悬停反馈（虽非真正悬停，但用户点击瞬间有视觉响应） - 方案三：JavaScript 监听
touchstart动态加 class，再用 class 控制颜色——但要防重复绑定和内存泄漏
真正卡住人的往往不是怎么写 :hover，而是没意识到它依赖整个选择器链的优先级、LVHA 顺序、以及设备能力差异。一个看似简单的颜色变化，背后连着渲染层、匹配逻辑和交互上下文。
