focus-visible与focus区别及使用教程

HTML中的`focus-visible`伪类是一项关键的可访问性特性，它智能区分用户是通过键盘导航（如Tab键）还是鼠标/触摸操作来聚焦元素，从而实现更精准、更包容的焦点样式控制：`focus`适用于所有聚焦场景，而`focus-visible`仅在键盘或辅助技术触发时生效，二者必须协同使用——先用`:focus`设置低调甚至透明的默认焦点状态，再将`:focus-visible`置于其后以专为键盘用户恢复清晰可见的视觉反馈（如醒目的轮廓线），既避免鼠标用户看到突兀的焦点环，又确保键盘用户的导航路径始终可感知；对于不支持该伪类的老版本浏览器，还需借助JavaScript模拟基本行为，但需注意其逻辑边界与真实交互节奏的对齐。

focus-visible 为什么不能直接替代 :focus

因为 :focus-visible 只在「用户明确通过键盘操作（如 Tab、Shift+Tab、方向键）获得焦点」时生效，而鼠标点击或触摸后触发的 :focus 不会匹配它。浏览器用启发式策略判断是否“可见焦点应被强调”，比如：用户刚点完按钮就立刻按 Tab，此时可能跳过 :focus-visible；但纯键盘导航全程都会命中。这意味着你不能只写 :focus-visible 就指望覆盖所有焦点场景——它不是 :focus 的增强版，而是互补机制。

必须配合 :focus 使用，且顺序不能错

样式层叠规则要求把 :focus-visible 放在 :focus 后面，否则会被覆盖。更关键的是：你要先给所有可聚焦元素定义基础 :focus 样式（比如统一移除 outline），再用 :focus-visible 单独加回键盘用户的轮廓线或高亮。否则鼠标用户点击后看不到任何焦点反馈，违反可访问性要求。

常见错误写法：

button:focus { outline: 2px solid #007aff; }
button:focus-visible { outline: none; } /* 错！这会让键盘用户失去焦点指示 */

正确逻辑是：

• :focus 设为「默认不显眼」（例如 outline: none 或 outline: 1px dotted transparent）
• :focus-visible 显式恢复视觉焦点提示（比如 outline: 2px solid #007aff）
• 确保该选择器出现在 :focus 规则之后

需要降级处理 focus-visible 不支持的浏览器

旧版 Safari（:focus-visible，部分安卓 WebView 表现也不稳定。不能只依赖它做焦点区分。推荐用 @supports 检测并包裹规则：

@supports (selector(:focus-visible)) {
  button:focus {
    outline: none;
  }
  button:focus-visible {
    outline: 2px solid #007aff;
    outline-offset: 2px;
  }
}
/* 不支持时回退到传统 focus 样式 */
button:focus {
  outline: 2px solid #007aff;
  outline-offset: 2px;
}

注意：@supports selector() 是关键，仅用 @supports (focus-visible) 会误判（CSS 属性检测不适用于伪类）。

自定义组件里要手动触发 focus-visible 的判定逻辑

原生 button、input 等元素由浏览器自动管理 :focus-visible 的触发时机，但自定义组件（如用 div role="button" 实现的按钮）不会自动获得该行为。你需要监听 keydown 事件，在非鼠标事件首次触发焦点时添加临时 class，模拟效果：

element.addEventListener('keydown', (e) => {
  if (e.key === 'Tab' || e.key === 'Enter' || e.key === ' ') {
    element.classList.add('js-focus-visible');
  }
});
element.addEventListener('mousedown', () => {
  element.classList.remove('js-focus-visible');
});

然后在 CSS 中写：

button.js-focus-visible:focus {
  outline: 2px solid #007aff;
}

这种手动方式无法 100% 复现浏览器原生逻辑（比如连续 Tab 导航中的状态保持），但能解决大部分可访问性缺口。

真正难的是让 focus-visible 的判定边界和你的交互节奏对齐——比如一个带下拉菜单的组合控件，键盘打开后菜单项获得焦点，但用户期望整个组合区域仍保持 visible 状态，这时候就得靠 JS 维护状态，而不是只靠 CSS 伪类。

理论要掌握，实操不能落！以上关于《focus-visible与focus区别及使用教程》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！