:focus-visible 是 CSS 伪类，仅在键盘触发焦点时生效，用于精准控制键盘用户的焦点样式，避免鼠标/触屏操作显示难看外轮廓。
focus-visible 是什么，什么时候该用它
:focus-visible 是一个 CSS 伪类，只在元素获得焦点且浏览器判定这次聚焦是由键盘操作触发时才生效。它不是用来“去掉焦点框”的，而是帮你精准控制键盘用户的焦点样式，同时让鼠标点击、触屏等操作不显示那个难看的蓝色/黑色外轮廓。
常见错误现象：直接给所有 button 或 a 加 outline: none，结果键盘用户 tab 导航时完全看不到当前焦点在哪，可访问性直接崩掉。
使用场景很明确：你希望保留键盘导航的视觉反馈，但又不想让鼠标点击后也出现焦点圈——比如按钮被点一下就闪个 outline，非常干扰。
注意：它不能替代 :focus，也不能和 :focus 简单互斥；它是 :focus 的子集，更智能。
立即学习“前端免费学习笔记（深入）”；
怎么写才真正生效
:focus-visible 要起作用，得满足两个前提：
- 浏览器支持（Chrome 86+、Firefox 83+、Safari 15.4+；Edge 同 Chrome）
- 元素本身能获得焦点（比如
button、a[href]、带tabindex的div）
最稳妥的写法是用 :focus:not(:focus-visible) 把鼠标点击的焦点样式关掉，再单独定义 :focus-visible 的样式：
button:focus:not(:focus-visible) {
outline: none;
}
button:focus-visible {
outline: 2px solid #007aff;
outline-offset: 2px;
}别这么写：button:focus { outline: none; } button:focus-visible { outline: 2px... } —— 这样在不支持 :focus-visible 的旧浏览器里，所有焦点都消失了。
参数差异：没有“参数”，但它受 outline、outline-offset、outline-style 控制，别忘了 outline-offset 防重叠。
为什么有时候 focus-visible 死活不触发
这是最容易卡住人的地方，原因往往很具体：
- 用户第一次交互是鼠标（比如页面加载后点了一个按钮），之后整个会话中浏览器可能暂时“降级”为只用
:focus，不再判断是否键盘驱动 - 某些框架或组件库（比如 React 的
button封装）偷偷调用了element.focus()，而没传{ preventScroll: true, focusVisible: true }（这个选项目前仅 Chromium 支持，且需配合HTMLElement.focusOptions） - 使用了
autofocus属性——页面加载时自动聚焦，此时浏览器通常不认为这是“键盘触发”，:focus-visible不会匹配 - 在 macOS 上 Safari 默认关闭了“使用键盘导航”（系统设置 > 键盘 > 快捷键 > 键盘导航），导致即使按 tab 也不触发
:focus-visible
性能影响几乎为零，但兼容性要兜底：可以用 @supports selector(:focus-visible) 包一层，老浏览器走传统 :focus 样式。
和 outline: none 的关系别搞混
outline: none 是危险操作，它直接干掉所有焦点指示，不管你是 tab 还是 click。
:focus-visible 的价值，恰恰在于让你敢用 outline——因为你知道它只对需要的人出现。
容易踩的坑：
- 把
:focus-visible当成“禁用焦点框”的快捷方式 - 在 reset.css 或 base.css 里全局写
*:focus-visible { outline: none }，等于把可访问性默认关掉 - 忘了测试真实键盘流程：打开页面 → 不碰鼠标 → 连续按 tab → 观察每个可聚焦元素是否有清晰、不遮挡、有对比度的焦点样式
这事的核心不是“怎么去掉那个圈”，而是“谁需要它，它该长什么样”。漏掉键盘用户，或者让鼠标用户多看一眼不该看的轮廓，都是失衡。
