:focus-visible 不是 :focus 的替代品，因为它仅在键盘导航时激活样式以避免鼠标点击后突兀显示焦点框；需分层处理控件语义，配合兜底写法和无障碍验证确保兼容性与可访问性。
为什么 :focus-visible 不是:focus的替代品
它只在用户明确依赖键盘导航时才激活样式，避免鼠标点击后意外出现焦点框。浏览器通过内部启发式判断操作方式——比如按Tab、Shift+Tab、Ctrl+F7等触发键盘导航行为时，:focus-visible 才会生效；单纯用鼠标点按钮，:focus 仍有，但 :focus-visible 不匹配。
常见错误现象：button:focus { outline: 2px solid blue; } 导致鼠标点击后蓝框突兀闪现，干扰视觉；换成 button:focus-visible { outline: 2px solid blue; } 后，鼠标用户完全无感知，键盘用户却获得清晰路径。
- 不能靠 JS 模拟判断是否“键盘触发”，浏览器的启发式逻辑不公开，也不稳定
-
:focus-visible在 Safari 15.4+ 才原生支持，旧版需postcss-focus-visible或focus-visiblepolyfill - 若同时写
button:focus和button:focus-visible，后者优先级更高（同选择器权重下，后声明覆盖前）
如何安全启用 :focus-visible 而不破坏现有焦点逻辑
直接替换所有 :focus 为 :focus-visible 是高危操作——表单控件（如 input、textarea）在获得焦点时，即使由鼠标触发，也应有视觉反馈（例如光标闪烁+边框高亮），否则用户无法确认输入位置。
实操建议：分层处理，按控件语义区别对待：
立即学习“前端免费学习笔记（深入）”；
- 可操作控件（
button、a[href]、summary）→ 用:focus-visible控制焦点指示器 - 文本输入类（
input、textarea、select）→ 保留:focus，确保光标可见性与输入态提示不丢失 - 自定义组件（如用
div[role="button"]实现的按钮）→ 必须手动加tabindex="0"，且仅响应:focus-visible，否则键盘用户无法聚焦
:focus-visible 的兼容性陷阱和兜底方案
Chrome 和 Firefox 默认启用，但 Safari 直到 15.4 才支持，且部分 Android WebView 完全不识别。更麻烦的是：当浏览器不支持时，:focus-visible 规则整条被忽略，不会回退到 :focus —— 这意味着键盘用户在旧环境里彻底失去焦点指示。
正确兜底不是靠 @supports 做条件加载，而是用「渐进增强」写法：
button:focus {
outline: none;
}
button:focus-visible {
outline: 2px solid #0066cc;
}
这样，不支持 :focus-visible 的浏览器仍走 :focus 分支（你得自己控制它是否显示）；支持的浏览器则用 :focus-visible 精准接管。
- 别写
button:focus:not(:focus-visible) { outline: none; }—— 逻辑反直觉，且在不支持:focus-visible的环境里整条规则失效，:focus依然生效 - CSS 预处理器（如 Sass）无法解决运行时支持判断，必须靠原生 CSS 层叠顺序控制
- 测试时务必用真实键盘 Tab 导航，禁用鼠标，验证焦点流是否连续、指示是否出现
无障碍测试中容易被忽略的关键点
:focus-visible 解决的只是“什么时候显示焦点框”，但它不保证焦点框本身是否足够可见。WCAG 2.1 要求焦点指示至少 3:1 对比度、宽度 ≥ 2px、包围整个交互区域。
这意味着即使用了 :focus-visible，如果只改了个浅灰色边框或加了透明度，键盘用户依然可能看不见。更隐蔽的问题是：某些 UI 库（如 Bootstrap、Material UI）默认焦点样式在深色主题下对比度不足，或被父容器 overflow: hidden 截断。
- 用浏览器 DevTools 的「Accessibility」面板检查焦点节点的
outline是否实际渲染且未被裁剪 - 切到系统级高对比度模式（Windows 设置 / macOS 辅助功能）下验证，部分系统会强制重置 outline，此时需用
outline-style: auto或box-shadow替代 - 移动端 Safari 对
:focus-visible支持不稳定，常需配合ontouchstart事件临时移除 focus 样式，但该 hack 会影响辅助技术识别
真正难的不是加一行 :focus-visible，而是让它的表现始终符合人手可触、眼力可辨、工具可读的三重约束。
