:focus-visible能解决键盘用户“找不到焦点”的问题，因为它仅在浏览器判定为键盘导航时激活样式，避免鼠标用户看到突兀边框，且依赖原生启发式判断而非js模拟，须与:focus配合使用。
为什么:focus-visible能解决键盘用户“找不到焦点”的问题
因为:focus-visible只在浏览器判断为“键盘导航”时才激活样式，不是所有聚焦都触发。鼠标点一下按钮，:focus会立刻生效，但:focus-visible大概率不匹配——这就避免了鼠标用户看到突兀的蓝边框，同时保留键盘用户必需的视觉路径。
它不是靠监听keydown事件模拟出来的，而是浏览器原生启发式判断：Tab、Shift+Tab、Ctrl+F7、方向键切入控件等行为才会被识别为“键盘导航上下文”。这个判断逻辑不可手动干预，也不该用 JS 重写。
必须和:focus配合使用，不能单独写:focus-visible
单独写button:focus-visible { outline: 2px solid #0066cc; }会导致旧浏览器（如 Safari
-
:focus是兜底层：提供基础可见性，哪怕只是微弱的outline: 2px solid #999 -
:focus-visible是增强层：覆盖在:focus之上，用更醒目样式强化键盘路径 - 顺序不能错：必须
:focus写在前，:focus-visible写在后，否则会被覆盖
常见失效场景与应对方式
:focus-visible不是稳定开关，它的触发依赖浏览器 UA 的上下文判断，以下情况容易“静默”：
- 页面加载后第一次交互是鼠标点击 → 后续一小段时间内，浏览器可能降级为全用
:focus，:focus-visible不生效 - 用了
autofocus属性 → 自动聚焦不算“键盘导航”，:focus-visible不匹配 - JS 调用
el.focus()但没传{ focusVisible: true }→ Chromium 支持该选项，但 Firefox/Safari 不认
应对方法不是强行“修复”，而是接受这种启发式特性，确保:focus样式本身已满足可访问性底线（对比度≥4.5:1、outline-offset ≥ 2px）。
移动端和 Safari 兼容性要特别留意
Safari 直到 15.4 才原生支持:focus-visible，此前版本会忽略该规则。不要依赖@supports (selector(:focus-visible))做功能开关——它在旧 Safari 里返回false，但 polyfill（如focus-visible库）又可能误判鼠标行为。
更稳妥的做法是：
- 始终写
:focus样式，保证最低可用性 - 用
postcss-focus-visible插件自动注入兼容代码，而非手写降级逻辑 - 避免在
:focus-visible里写复杂动画或依赖prefers-reduced-motion的联动效果——Safari 对这类组合的支持滞后
真正难的不是让:focus-visible亮起来，而是让它不亮的时候，:focus依然可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
