伪类组合需显式声明才能叠加生效，:hover:focus仅在鼠标悬停且获得焦点时触发，优先级更高；但键盘Tab聚焦时不满足hover条件，故须分别定义:hover、:focus和:hover:focus以保障可访问性。
伪类组合写法决定样式是否叠加生效
当 :hover 和 :focus 同时存在（比如用户悬停后点击获得焦点），浏览器默认不会自动合并两者样式——必须显式写出组合选择器，否则后声明的规则会覆盖前一个，造成“只生效一个”的错觉。
-
:hover和:focus是独立伪类，button:hover { color: red; }与button:focus { outline: 2px solid blue; }互不干扰，但也不会叠加 - 要让两者同时满足时生效，必须用逗号分隔或连写：
button:hover, button:focus（任一满足）或button:hover:focus（同时满足） - 连写形式
:hover:focus的优先级高于单个伪类，无需额外加权，但注意它只在两个条件都成立时触发（例如鼠标悬停+键盘聚焦）
常见冲突现象：焦点框被 hover 覆盖或消失
典型问题：按钮有 :hover { background: #eee; }，也有 :focus { outline: 2px solid #007bff; }，但鼠标悬停后点击，outline 消失了——不是 bug，是 :hover 规则里没重申 outline，而浏览器渲染时用了该规则的完整声明（outline 被隐式设为 outline: none 或初始值）。
- 避免在
:hover中重置可访问性相关属性（如outline、box-shadow），除非你同步在:hover:focus中补全 - 更稳妥的做法是把基础交互样式抽到单独规则：
button:focus { outline: 2px solid #007bff; }，再用button:hover:focus { outline-color: #0056b3; }微调 - 不要依赖顺序“覆盖”，CSS 优先级相同的情况下，后声明的规则会完全替换同名属性值
:hover:focus 在键盘操作中可能不触发
:hover:focus 要求鼠标指针在元素上 *且* 元素获得焦点。键盘 Tab 导航时没有 hover，因此该组合选择器不会生效——这常被误认为“不兼容键盘”。
- 若需统一视觉反馈，推荐分别定义：
button:hover、button:focus、button:hover:focus三者，并确保:focus样式足够明显（尤其对屏幕阅读器用户） - 移动端 Safari 等浏览器可能不触发
:hover（无悬停概念），此时:focus成为唯一可靠状态，不能省略 - 测试时务必用 Tab 键切换焦点，而非仅靠鼠标，验证可访问性链路是否完整
button {
background: #fff;
border: 1px solid #ccc;
outline: none; /* 清除默认 focus 样式，由我们自己控制 */
}
button:hover {
background: #f5f5f5;
}
button:focus {
outline: 2px solid #007bff;
outline-offset: 2px;
}
button:hover:focus {
background: #e9ecef;
outline-color: #0056b3;
}真实项目中最容易忽略的是：把 :focus 当作纯键盘行为处理，却忘了它在鼠标点击后也必然触发；而 :hover:focus 看似精准，实则窄化了适用场景——它只服务“鼠标悬停中点击”的那一小部分用户。
立即学习“前端免费学习笔记（深入）”；
