:focus仅对可聚焦元素生效，如input、button、a[href]等，div或span需加tabindex="0"；hover与focus样式按声明顺序叠加，:focus-visible更适配键盘操作；移除outline必须提供等效视觉反馈。
focus伪类触发条件与可聚焦元素限制
只有能获得键盘焦点的元素才响应 常见错误是给 CSS 选择器权重相同的情况下，后声明的规则会覆盖先声明的。但更关键的是：用户同时满足 hover 和 focus（比如鼠标悬停后点击输入框），此时两个伪类都为真，浏览器会按层叠顺序应用样式。 例如下面这段代码中， 立即学习“前端免费学习笔记（深入）”； 很多人直接写 iOS 和 Android 浏览器对 :focus，比如 、、，而 tabindex 属性。
或无 tabindex 的 :focus 样式，结果完全不生效。
tabindex="0"
tabindex="-1" 元素依赖 :focus 视觉反馈——它只能通过 JS .focus() 触发，无法用 Tab 键进入:focus 支持较弱，常需配合 ontouchstart 或 role="button" 补充逻辑hover与focus共存时的样式覆盖逻辑
input:focus 的边框颜色最终是红色，不是蓝色：input:hover {
border-color: blue;
}
input:focus {
border-color: red;
}
input:focus:hover 或 input:focus 放在 input:hover 后面:focus-visible 是更现代的替代方案，它只在键盘操作触发 focus 时生效，能避免鼠标悬停时意外激活 focus 样式:hover:focus 来做「仅鼠标悬停且聚焦」的效果——多数浏览器不支持该组合（focus 状态在鼠标点击后才建立，hover 已结束）去除默认焦点轮廓（outline）的安全替代方案
*:focus { outline: none; } 来“美化”焦点样式，但这会破坏可访问性——键盘用户将彻底失去焦点位置提示。
box-shadow、border 或背景色变化替代 outline
:focus-visible 有选择地移除 outline：button:focus {
outline: none;
}
button:focus-visible {
outline: 2px solid #007bff;
}outline: 2px solid 并确保色值满足 WCAG AA 对比度要求移动端 touch 设备下的 hover/focus 行为差异
:hover 支持有限：通常只在第一次触摸后临时激活一次，之后失效；:focus 在软键盘弹出时才稳定触发。
