: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 仍有效——前提是它写在前面。

前端设计优化skill

前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

下载

• ✅ 正确：button:focus { outline: none; } 在前，button:focus-visible { outline: 2px solid #0066cc; } 在后
• ❌ 错误：:focus-visible 写在 :focus 前面，或用 !important 强行覆盖
• 如果 :focus 写在后面，旧浏览器里它会被前面无效的 :focus-visible 规则“遮住”，导致焦点彻底不可见

哪些元素默认触发 :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">（缺键盘事件监听）<li> <code><input> 这类表单控件即使由鼠标触发焦点，也应有视觉反馈（如边框高亮、光标闪烁），所以不能全靠 :focus-visible ——得保留 :focus 控制输入态

兼容性差怎么办？别碰 @supports selector()

@supports selector(:focus-visible) 在 Safari 15.3 及更早版本中解析失败，整个 CSS 块会被丢弃——你连降级样式都拿不到。

• 真正可行的路径只有两个：引入 focus-visible polyfill（它在原生支持时静默退出），或坚持「渐进增强」写法：:focus 兜底 + :focus-visible 覆盖
• Safari 15.0–15.3 需手动开启辅助功能才启用原生 :focus-visible，行为不稳定，polyfill 是最省心的选择
• 调试时别反复切键盘，用 DevTools Elements 面板手动勾选元素的 :focus 和 :focus-visible 状态，更快验证是否匹配

最容易被忽略的点是：表单控件（如 <input>）的焦点反馈不能只靠 :focus-visible——它们需要鼠标点击后也有明确输入态提示，否则用户根本不确定光标在哪。这个分层逻辑，比单纯“加个伪类”复杂得多。