:focus-visible单独写会彻底失效，因为它仅响应Tab、Shift+Tab、方向键、Enter、Space等键盘导航行为，鼠标点击、触摸或JS调用focus()均不触发；且Safari 15.3及更早版本直接忽略该规则，若无前置:focus声明，旧浏览器用户将完全失去焦点反馈。
为什么:focus-visible单独写会彻底失效
只写 button:focus-visible { outline: 2px solid blue; }，鼠标点击按钮后页面毫无视觉反馈——这不是 bug，是浏览器故意行为。它只响应 Tab、Shift+Tab、方向键、Enter、Space 这类键盘导航触发的聚焦；鼠标点击、触摸 tap、甚至 JS 调用 element.focus() 都不会匹配它。
更致命的是兼容性降级：Safari 15.3 及更早版本直接忽略整条 :focus-visible 规则。如果没有前置的 :focus 声明，这部分用户连基础焦点样式都看不到。
- 必须搭配
:focus使用，且:focus声明必须在前 - 不能依赖
@supports selector(:focus-visible)包裹——Safari 15.3 解析失败时会丢弃整个 CSS 块，连兜底样式都没了 - 全局
*:focus { outline: none; }会把:focus-visible的生效基础一起干掉
正确的声明顺序和基础样式怎么写
顺序错了，降级逻辑就崩了。浏览器不支持 :focus-visible 时会整条规则丢弃，但前面的 :focus 仍有效——前提是它写在前面。
✅ 推荐写法（兼顾降级与增强）：
立即学习“前端免费学习笔记（深入）”；
button:focus {
outline: 1px dotted #999;
outline-offset: 2px;
}
button:focus-visible {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
-
:focus提供所有浏览器都能看到的基础焦点反馈（虚线框足够低调又清晰） -
:focus-visible在支持的浏览器中覆盖为更醒目的实线框，仅对键盘用户生效 - 不要用
!important强行覆盖，靠层叠顺序自然接管 - 显式设置
outline-offset，避免轮廓被边框或滚动条裁切
哪些元素默认不触发:focus-visible？怎么补救
不是加了 tabindex="0" 就自动支持。浏览器根据语义和交互意图内置判断逻辑：
- ✅ 默认支持：
<input>、<textarea></textarea>、<button></button>、<select></select>、带tabindex="0"的<div> <li>❌ 默认不触发：<code><a></a>（无href）、<label></label>（未设tabindex）、<div role="button">（缺键盘事件监听） <p>自定义组件要补上两件事：</p> <ul> <li>显式绑定 <code>keydown事件，监听 Enter 和 Space 并触发对应操作 - 确保元素有明确交互语义（如
role="button"+tabindex="0"） - 禁用态（
disabled或aria-disabled="true"）下不会触发——这是正确行为，别强行绕过
调试:focus-visible为什么没反应的最快方法
别反复切键盘、点鼠标验证，效率低还容易误判。DevTools 里直接手动勾选元素的 :focus-visible 状态，看样式是否生效——这是最准、最快的验证方式。
另外注意两个隐蔽坑：
- 页面加载后 JS 调用
element.focus()默认不算键盘导航，:focus-visible不匹配；Chrome 111+ 可传{ focusVisible: true }强制触发 - 用户首次交互是鼠标（比如刚打开页面就点按钮），部分浏览器会临时“降级”为只用
:focus，后续键盘操作才恢复判断 - 某些 UI 框架（如旧版 Bootstrap、Ant Design）悄悄重置了
outline，得检查 computed styles 确认是否被覆盖
真正关键的不是让样式“看起来酷”，而是确保键盘用户每次按 Tab 都能立刻知道焦点落在哪——这个判断必须由浏览器原生完成，别用 JS 模拟。
