:focus-visible必须与:focus共存且:focus声明在前，否则鼠标用户无焦点反馈、旧浏览器键盘用户不可见；仅响应Tab/Enter等键盘行为，不触发于鼠标点击或JS聚焦。
是关键之一，但不是“开关式”解决方案——它必须和 :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" 就行
浏览器根据语义和交互模式内置判断逻辑，不是所有可聚焦元素都自动支持：
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
立即学习“前端免费学习笔记（深入）”；
- ✅ 默认支持：
<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 面板手动勾选元素的
:focus和:focus-visible状态，更快验证是否匹配
最容易被忽略的点是：表单控件（如 <input>）的焦点反馈不能只靠 :focus-visible——它们需要鼠标点击后也有明确输入态提示，否则用户根本不确定光标在哪。这个分层逻辑，比单纯“加个伪类”复杂得多。
