:focus-visible 不能直接替代 :focus，因其仅在键盘导航（如Tab）时触发，而 :focus 在鼠标、触摸、Tab 时均触发；若替换会导致鼠标操作无焦点样式，影响可用性。
focus-visible 为什么不能直接替代 :focus
因为 :focus 在鼠标点击、触摸、Tab 切换时都会触发，而 :focus-visible 只在“明确由键盘导航（如 Tab）触发焦点”时生效——这是浏览器根据用户交互行为自动判断的。如果你直接用 :focus-visible 替代所有 :focus 样式，鼠标点进去的按钮/输入框会完全没边框，用户立刻觉得“失焦了”或“没响应”。
正确做法是两者共存，让键盘用户有清晰焦点指示，鼠标用户保持自然无干扰：
button:focus { outline: none; }
button:focus-visible { outline: 2px solid #007aff; }
注意顺序：:focus 必须写在前，否则会被后面的 :focus-visible 覆盖掉重置逻辑。
Chrome/Firefox/Safari 对 focus-visible 的支持差异
Firefox 从 84+、Chrome 86+、Safari 15.4+ 原生支持 :focus-visible，但 Safari 15.4 之前版本不支持，且旧版 Safari 会把 :focus-visible 当作无效选择器直接丢弃——不会报错，但样式不生效。
立即学习“前端免费学习笔记（深入）”；
如果你需要兼容 Safari 15.3 或更早，必须加降级：
- 用
:focus+ JavaScript 检测键盘操作（例如监听keydown事件设 body class），再配合 class 控制显示 - 或使用 focus-visible polyfill，它会在支持时静默退出，不支持时自动接管
- 别用
@supports selector(:focus-visible)做条件加载——Safari 15.3 会解析失败，导致整个规则块被忽略
focus-visible 不生效的三个常见原因
不是代码写错，而是环境或行为不符合触发条件：
- 用户第一次交互是鼠标点击（哪怕之后按 Tab），浏览器可能全程禁用
:focus-visible，直到页面刷新或用户显式按一次 Tab -
input[type="number"]或带contenteditable的元素，在部分 Chrome 版本中不触发:focus-visible（已知 bug，建议测试具体目标版本） - 父元素设置了
outline: none且没重置子元素，或者用了all: unset，会清掉:focus-visible的默认 outline 行为
验证是否触发：打开 DevTools → Elements 面板 → 选中元素 → 看右侧 Styles 标签页里 :focus-visible 规则是否被“打钩”激活（而非灰色禁用）。
和 outline-style: auto 的兼容性问题
很多设计师喜欢用 outline: 2px solid #007aff，但原生 outline: auto（比如 Chrome 默认的蓝色辉光）在高对比度模式下可被系统放大/变色，而自定义颜色+宽度会绕过系统无障碍设置。
更稳妥的做法是：
- 保留
outline: auto，只改颜色：outline-color: #007aff - 或用
outline: solid+outline-width+outline-color分开写，避免outline: 2px solid #007aff覆盖掉outline-style: auto的语义 - 别对
button:focus-visible设置outline-offset过大（如 > 2px），Windows 高对比主题下可能裁剪焦点环
真正难的是判断什么时候该尊重系统行为，什么时候必须干预——这取决于你的设计系统是否承诺适配 Windows 高对比模式或 macOS VoiceOver 的焦点渲染逻辑。
