:focus 样式是键盘用户操作页面的底线，缺失会导致Tab导航失效；常见问题包括outline被重置、覆盖或对比度不足，正确做法是用高对比度outline配合outline-offset，并兼顾移动端和辅助技术兼容性。
:focus 样式不是锦上添花，而是键盘用户能操作页面的底线。没它，Tab 键切到按钮或输入框时屏幕毫无变化，等于关掉他们的导航地图。
为什么 :focus 样式经常“看不见”
不是伪类失效，而是视觉反馈被覆盖或隐藏：
-
* { outline: none; }或 reset.css 里默认清掉了所有outline，你写的input:focus { outline: 2px solid #007bff; }被后声明规则覆盖 - 写了
*:focus { outline: none; }却没加任何替代样式——键盘用户立刻“失明” - 用
border替代outline，但没设outline-offset，导致焦点框被内容遮挡或挤出布局 - iOS Safari 默认给聚焦元素加蓝光，一旦你设了
outline，它就消失；而你新设的样式对比度又不足（WCAG 要求 ≥ 3:1）
input:focus 没反应？先查这三件事
根本不是选择器写错，而是浏览器压根没识别到焦点状态：
- 打开开发者工具，检查
input:focus样式是否被划掉——如果被划掉，说明有更高权重规则（比如框架的.form-control:focus）覆盖了它 - 确保
input没加disabled、readonly或tabindex="-1"，父容器也没设pointer-events: none - 移动端（尤其 iOS Safari）必须让元素“可操作”：给
input加ontouchstart=""或cursor: pointer，否则点击不触发:focus
安全又有效的 :focus 写法
绕过常见陷阱的最小可行方案：
- 用
outline，不用border：它不占布局空间，不会引发重排，且符合 WCAG 对“非侵入式聚焦指示”的要求 - 显式设置
outline-offset（如2px），避免被父容器overflow: hidden剪掉 - 颜色选高对比度值，比如
#0066cc或#2d5d9f，别只靠色相区分（红绿色盲用户看不到） - 移动端需额外处理：iOS Safari 默认蓝光一设
outline就消失，必须手动补足尺寸和对比度 - 禁用
outline会让屏幕阅读器用户的自定义样式或浏览器强制高对比模式失效
真正难的不是写对一行 input:focus，而是确保它在整个组件库、所有第三方 UI 框架、每种设备和辅助技术环境下都稳定可见。样式可能被覆盖十次，但只要有一次没 fallback，键盘用户就卡在页面中间找不到路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
