html实现focus visible焦点可见_html :focus-visible键盘焦点可见样式【技巧】-html教程-PHP中文网

:focus-visible 未生效主因是被后续同权 :focus 规则覆盖；应将其声明置于 :focus 之后，用 :focus:not(:focus-visible) 精准排除键盘用户，并确保 outline 不被粗暴设为 none 而影响可访问性。

html实现focus visible焦点可见_html :focus-visible键盘焦点可见样式【技巧】

focus-visible 为什么没生效？检查是否被 :focus 覆盖

很多情况下写好了 :focus-visible 样式，但用键盘 Tab 切换时却看不到效果，根本原因是浏览器默认的 :focus 样式（比如 Chrome 的蓝色外框）被后续更宽泛的选择器覆盖了。只要 :focus 规则出现在 :focus-visible 后面，且权重相同，它就会无条件生效，把键盘/鼠标触发的焦点都“一锅端”掉。

实操建议：

确保 :focus-visible 声明在 :focus 之后（顺序很重要）
避免用 *:focus 或 button:focus 这类通用规则清空 outline，改用 :focus:not(:focus-visible) 精准排除键盘用户
开发时打开 DevTools → Elements 面板，选中元素后手动勾选 :focus-visible 伪类，验证样式是否真的被加载

如何让 focus-visible 只对键盘操作生效？别漏掉 user-agent 默认行为

Chrome/Firefox 等现代浏览器已原生支持 :focus-visible，但它依赖 UA 的启发式判断：只有当焦点是通过键盘（Tab、Shift+Tab、空格、Enter 等）进入时才触发；鼠标点击、触摸、element.focus() 调用默认不触发——前提是没干扰 UA 的检测逻辑。

容易踩的坑：

给按钮加了 onclick="this.focus()"，这会让鼠标点击后也触发 :focus-visible，破坏预期
用了 outline: none 却没配 :focus-visible 回退样式，导致键盘用户完全“失焦”
在 Safari（≤15.4）或旧版 Edge 中 :focus-visible 不可用，需用 focus-visible polyfill

兼容 fallback：用 JS 检测键盘焦点并加 class

当必须支持 Safari 15.3 或需要更精细控制时，可以手动模拟 :focus-visible 行为。核心思路是监听 keydown（尤其是 Tab）后标记“当前是键盘模式”，再结合 focus 事件动态加 class。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

简短示例：

let keyboardMode = false;
document.addEventListener('keydown', (e) => {
  if (e.key === 'Tab') keyboardMode = true;
});
document.addEventListener('mousedown', () => keyboardMode = false);
document.addEventListener('focusin', (e) => {
  if (keyboardMode) e.target.classList.add('focus-visible');
});
document.addEventListener('focusout', (e) => {
  e.target.classList.remove('focus-visible');
});

注意：focusin/focusout 是冒泡事件，比 focus/blur 更适合委托；但需防重复添加 class，建议配合 classList.toggle 或状态缓存。