:hover 和 :focus 需显式组合（如:hover:focus）才能同时生效，否则样式互不影响；单独使用无法实现叠加态效果，且需注意优先级、可访问性及移动端兼容性。
hover 和 focus 同时触发时样式不生效？
常见现象是：鼠标悬停时 :hover 样式正常，但用键盘 Tab 进入焦点后 :focus 样式没反应，或者两者叠加时样式被覆盖。根本原因是 css 优先级和伪类匹配逻辑——:hover 和 :focus 是独立条件，浏览器不会自动合并它们的样式规则，必须显式写成组合选择器才能生效。
- 单独写
a:hover { color: red; }和a:focus { outline: 2px solid blue; }，两者互不影响，但无法实现“悬停+聚焦”共存效果 - 想让按钮在鼠标悬停且获得焦点时显示特殊边框，必须写成
button:hover:focus { border-color: purple; } - 注意顺序：如果
:focus规则在后且样式相同，会覆盖:hover；但组合选择器:hover:focus优先级更高，能确保叠加态生效
如何让键盘用户也获得 hover 级别的视觉反馈？
仅依赖 :hover 会让键盘操作者（如屏幕阅读器用户、Tab 导航者）缺失关键状态提示。WCAG 要求焦点可见性，而单纯加 :focus 又常显得突兀或与悬停风格不一致。稳妥做法是统一视觉语言，用组合伪类覆盖默认行为。
- 避免只写
a:focus { outline: none; }—— 这会直接抹掉焦点指示，违反可访问性 - 推荐方案：
button:hover, button:focus, button:hover:focus { background-color: #007bff; color: white; }这样保证鼠标悬停、键盘聚焦、以及两者同时发生（比如用鼠标点击前已聚焦）都呈现一致高亮
- 若需区分状态（如悬停变色、聚焦加边框），可分层定义：
button:hover控制颜色，button:focus控制 outline，button:hover:focus再微调（例如移除 outline 防重叠）
focus-visible 是不是可以替代 focus？
:focus-visible 是现代浏览器中更精准的焦点检测方式，它只在用户**明确通过键盘触发焦点**时匹配，避免鼠标点击后意外激活 :focus 样式。但它不能完全替代 :focus，尤其在旧浏览器兼容或需要强制视觉反馈的场景。
- chrome/firefox/edge 支持良好，safari 15.4+ 开始支持；不支持时需回退到
:focus - 典型用法：
button:focus:not(:focus-visible) { outline: none; } button:focus-visible { outline: 2px solid #007bff; }这样鼠标点击不显示 outline，键盘 Tab 才显示
- ⚠️ 注意：
:focus-visible和:hover组合（button:hover:focus-visible）目前兼容性较差，部分浏览器不识别，生产环境慎用
移动端 touch 设备上的 hover 失效问题
大多数移动浏览器（ios Safari、android Chrome）默认不触发 :hover，除非用户点击元素（模拟一次“悬停”），且后续可能缓存该状态。这意味着纯 :hover 样式在手机上基本不可靠，而 :focus 在触摸屏上也只对可聚焦元素（如 input、带 tabindex 的 div）有效。
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
button:hover实现核心交互反馈，改用:active响应触摸按下态：button:active { transform: scale(0.98); } - 若需悬停感，可结合 javaScript 监听
touchstart添加临时 class，再用 CSS 控制：.btn--touched:hover不适用，但.btn.touched可以 - 安卓 Chrome 中开启
hover支持需设置@media (hover: hover)媒体查询做条件加载，但实际意义有限，建议优先考虑触控友好设计
真正容易被忽略的是：组合伪类 :hover:focus 的匹配时机——它只在元素**同时满足两个条件**时才生效，比如用户用 Tab 聚焦后又把鼠标移上去。而很多 ui 组件（如下拉菜单 toggle 按钮）需要的是“任一条件满足即高亮”，这时候就得老老实实用逗号分隔的多选择器，而不是寄希望于组合。