:hover 和 :focus 会互相覆盖是因为二者特异性相同，浏览器按声明顺序和选择器具体程度决定生效样式；解法包括合并写法（如:hover:focus）、分写:focus-visible强化键盘反馈、提升选择器特异性，避免!important。
为什么 :hover 和 :focus 样式会互相覆盖？
浏览器按 css 优先级和声明顺序决定最终生效的样式，而 :hover 与 :focus 是同级伪类（特异性相同），谁写在后面、谁的规则更具体，谁就赢。常见现象是：鼠标悬停时显示高亮，但键盘聚焦后样式却回退——其实是 :hover 规则覆盖了 :focus；或者反之，:focus 写在后面但只对键盘有效，鼠标移入时又失效。
用复合伪类同时满足鼠标和键盘交互
最直接的解法是合并状态，避免冲突：用 :hover:focus 或 :focus:hover（两者等价）定义「既悬停又聚焦」时的样式；更实用的是分别定义 :hover、:focus、:focus-visible，再用 :is() 或层叠逻辑统一视觉反馈。
-
:focus-visible只在键盘触发聚焦时生效（现代浏览器支持），可替代部分:focus场景，避免鼠标点击后残留焦点框 - 若需统一悬停/聚焦表现，直接写：
button:hover, button:focus { background: #007bff; } - 想让键盘用户获得更强反馈（如加边框），可单独强化：
button:focus-visible { outline: 2px solid #007bff; }
优先级不够时用更具体的 selector 拉开差距
当必须保留独立规则且存在覆盖，就靠选择器特异性破局。例如 .btn:hover 被 button:focus 覆盖，是因为 class 的特异性（0,1,0）高于元素名（0,0,1）。这时可提升 :focus 的权重：
- 加 class：
.btn:focus { /* 更高优先级 */ } - 加元素前缀：
button.btn:focus { /* 特异性 0,1,1 */ } - 避免用
!important——它会让后续维护变脆弱，尤其在组件化场景下容易引发连锁覆盖
移动端和可访问性带来的隐藏问题
ios safari 点击按钮会先触发 :hover（短暂），再触发 :focus；android chrome 则可能跳过 :focus。这意味着仅依赖 :focus 做视觉反馈，在触摸设备上可能完全不可见。
立即学习“前端免费学习笔记（深入）”；
- 不要把
:focus样式设计成仅靠 outline（易被用户忽略），至少叠加背景或阴影 - 测试时用真实设备 + 键盘 Tab 导航，确认焦点路径清晰、无跳跃
- 如果项目需兼容旧版 Safari，
:focus-within可作为备选，但它作用于父容器，适用场景有限
实际项目里最容易被忽略的，是把 :focus 当作纯键盘专属状态来设计，却没考虑触屏点击后的临时焦点、Safari 的 hover/focus 时序、以及屏幕阅读器用户的视觉反馈需求。