:focus-visible不能单独使用，必须与:focus配合且:focus必须在前声明；否则鼠标点击无焦点反馈，旧版浏览器会完全忽略样式，导致键盘用户失去焦点指示、鼠标用户误判操作失效。
直接结论：只写 :focus-visible 会彻底破坏鼠标用户的焦点反馈，必须和 :focus 配合使用，且顺序不能错。
为什么不能单独用 :focus-visible？
浏览器对 :focus-visible 的触发有严格限制：它只在 Tab、Shift+Tab、方向键、Enter、Space 等明确的键盘导航行为下激活；鼠标点击、触摸 tap、甚至 JS 调用 element.focus() 都不会匹配它。这意味着：
- 如果只写
button:focus-visible { outline: 2px solid blue; }，鼠标点按钮后完全没轮廓——用户无法确认操作是否生效 - 旧版 Safari（15.3 及更早）会直接忽略整条
:focus-visible规则，结果是所有浏览器都看不到焦点样式 -
:focus是兜底基础，:focus-visible是增强层，二者不是替代关系
:focus 和 :focus-visible 必须怎么写顺序？
声明顺序决定降级逻辑是否可靠。浏览器不支持 :focus-visible 时，整条规则被丢弃，但前面的 :focus 仍有效。所以：
- ✅ 正确写法：
button:focus { outline: none; }必须在前，button:focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; }在后 - ❌ 错误写法：
:focus-visible写在:focus前面，或用!important强行覆盖，会破坏自然降级 - ⚠️ 如果全局写了
* { outline: none; }，必须显式为:focus-visible恢复outline，否则它也被清掉
哪些元素默认支持 :focus-visible？
不是加了 tabindex="0" 就能用。浏览器根据语义和交互模式内置判断逻辑：
立即学习“前端免费学习笔记（深入）”；
- ✅ 默认触发：
<input>、<textarea>、<button>、<select>、带tabindex="0"的<div> - ❌ 默认不触发：
<a>（无href）、<label>（未设tabindex）、纯<div role="button">（缺键盘事件监听） - ? 验证技巧：DevTools 里手动勾选元素的
:focus-visible状态，比反复切键盘更快确认样式是否生效
兼容性差怎么办？别用 @supports selector()
@supports selector(:focus-visible) 在 Safari 15.3 及更早版本中解析失败，整个 CSS 块会被丢弃——你连降级样式都拿不到。真正可行的路径只有两个：
- 引入
focus-visiblepolyfill，它在支持原生特性时静默退出，不支持时自动接管 - 坚持「渐进增强」写法：
:focus兜底 +:focus-visible覆盖，不依赖任何条件加载机制 - ⚠️ 特别注意：Safari 15.0–15.3 需手动开启辅助功能才启用原生
:focus-visible，行为不稳定，polyfill 是最省心的选择
最容易被忽略的一点：表单控件（如 <input>、<textarea>）不能全盘套用 :focus-visible —— 它们需要始终有视觉反馈（比如边框高亮+光标），否则鼠标用户点进去却找不到输入位置。区分语义来写，比统一替换更稳妥。
