:focus-visible不是:focus的替代，而是协同解决键盘用户可访问性与鼠标/触摸用户视觉干扰的特定问题；必须与:focus共存且:focus在前，否则鼠标用户无反馈、旧浏览器键盘用户不可见。
:focus-visible 不是比 :focus “更适合”，而是解决了一个它无法处理的特定问题：在保留键盘用户可访问性的同时，避免鼠标/触摸用户看到冗余的焦点轮廓。直接用 :focus 加 outline: none 会同时砍掉两类用户的反馈；而只用 :focus-visible 又会让鼠标点击后完全无反馈——所以它必须和 :focus 协同工作，不是替代关系。
为什么单独写 :focus-visible 在生产环境会出事
浏览器只在明确的键盘导航行为（Tab、Shift+Tab、方向键、Enter、Space）下才匹配 :focus-visible；鼠标点击、触摸 tap、甚至 JS 调用 element.focus() 都不会触发它。
- 只写
button:focus-visible { outline: 2px solid blue; }→ 鼠标点按钮后完全没轮廓，用户无法确认操作是否生效 - Safari 15.3 及更早版本会直接忽略整条
:focus-visible规则，结果是所有浏览器都看不到焦点样式 - 如果全局写了
* { outline: none; }，:focus-visible的样式也会被清掉，必须显式恢复
:focus 和 :focus-visible 的声明顺序为什么不能错
顺序错了，降级逻辑就崩了。浏览器不支持 :focus-visible 时会整条规则丢弃，但前面的 :focus 仍有效——前提是它写在前面。
- ✅ 正确：
button:focus { outline: none; }在前，button:focus-visible { outline: 2px solid #0066cc; }在后 - ❌ 错误：
:focus-visible写在:focus前面，或用!important强行覆盖 - 如果
:focus写在后面，旧浏览器里它会被前面无效的:focus-visible规则“遮住”，导致焦点彻底不可见
哪些元素默认触发 :focus-visible？不是加了 tabindex="0" 就行
浏览器根据语义和交互模式内置判断逻辑，不是所有可聚焦元素都自动支持：
立即学习“前端免费学习笔记（深入）”；
- ✅ 默认支持：
<input>、<textarea>、<button>、<select>、带tabindex="0"的<div> - ❌ 默认不触发：
<a>（无href）、<label>（未设tabindex）、纯<div role="button">（缺键盘事件监听） -
<input>这类表单控件即使由鼠标触发焦点，也应有视觉反馈（如边框高亮、光标闪烁），所以不能全靠:focus-visible——得保留:focus控制输入态
兼容性差怎么办？别碰 @supports selector()
@supports selector(:focus-visible) 在 Safari 15.3 及更早版本中解析失败，整个 CSS 块会被丢弃——你连降级样式都拿不到。
- 真正可行的路径只有两个：引入
focus-visiblepolyfill（它在原生支持时静默退出），或坚持「渐进增强」写法：:focus兜底 +:focus-visible覆盖 - Safari 15.0–15.3 需手动开启辅助功能才启用原生
:focus-visible，行为不稳定，polyfill 是最省心的选择 - 调试时别反复切键盘，用 DevTools Elements 面板手动 toggle
focused状态更可靠
最容易被忽略的一点是：焦点样式的存在意义不是“看起来酷”，而是告诉用户“你现在在哪儿、能干什么”。:focus-visible 的智能判断依赖浏览器对交互意图的理解，而这种理解在不同设备、不同辅助技术、不同用户习惯下并不统一——所以永远要以 :focus 为底线，再用 :focus-visible 做精细化收口。
