:focus-visible 更适合表单可访问性，因为它仅在键盘导航（如tab）时显示焦点样式，避免鼠标点击时突兀的轮廓线；需用层叠规则安全降级，并注意浏览器支持与元素默认行为差异。
focus-visible 为什么比 focus 更适合表单可访问性
:focus 会在键盘 Tab、鼠标点击、触摸甚至 JS 调用 element.focus() 时都触发，导致鼠标用户看到突兀的轮廓线。而 :focus-visible 是浏览器原生判断：仅当用户明确通过键盘操作（如 Tab、Shift+Tab、方向键）聚焦元素时才生效，跳过鼠标/触控点击场景。
- 浏览器需启用“焦点可见性检测”逻辑（现代 Chrome/Firefox/Edge 默认开启，Safari 15.4+ 支持）
- 不依赖用户代理字符串或手动维护
is-keyboard-focus类 - 与屏幕阅读器配合更自然：键盘导航时样式出现，鼠标操作时不干扰视觉流
如何安全降级到 :focus（兼容旧浏览器）
:focus-visible 不被支持时，直接回退到 :focus 会导致鼠标点击也亮起样式——必须用层叠覆盖来抑制：
button:focus {
outline: 2px solid #007aff;
}
<p>button:focus:not(:focus-visible) {
outline: none;
}</p><p>button:focus-visible {
outline: 2px solid #007aff;
outline-offset: 2px;
}- 顺序不能错：
:focus必须在最前，:focus:not(:focus-visible)紧随其后用于“取消非键盘聚焦的样式” - Safari 15.3 及更早版本不支持
:focus-visible，该写法仍能保证基础聚焦可用 - 不要写成
button:focus-visible, button:focus并列，否则旧浏览器会忽略整条规则
表单控件中哪些元素默认不触发 focus-visible
不是所有可聚焦元素都会响应 :focus-visible，取决于浏览器是否认为它“需要可见焦点提示”：
- ✅ 默认触发：
input、textarea、button、带tabindex的div、select - ❌ 默认不触发：
a（无href）、span（即使有tabindex="0"）、label（除非显式tabindex） - ⚠️ 注意：自定义组件（如封装的
Switch）若用div+tabindex实现，需手动添加role="button"或监听键盘事件，否则部分浏览器不会激活:focus-visible
避免 focus-visible 样式被意外覆盖的常见坑
很多 CSS 框架（如 Tailwind、Bootstrap）或重置样式会全局设置 *:focus { outline: none }，这会直接干掉 :focus-visible 的基础能力：
立即学习“前端免费学习笔记（深入）”；
- 检查 DevTools 中 computed styles，确认
outline是否被:focus规则提前设为none - 若使用 CSS-in-JS，确保
:focus-visible规则的 specificity ≥ 覆盖它的:focus规则（例如加button:focus-visible而非仅:focus-visible） - 不要在
:focus-visible中依赖!important——它可能掩盖真正的问题，比如父级outline: 0透传
:focus-visible 的核心价值不在“炫酷效果”，而在让键盘用户的路径可感知、不打断鼠标用户的视觉预期。真正难的不是写对那几行 CSS，而是意识到：样式是否出现，本质上是个输入意图识别问题，而不是纯视觉设计问题。
