:focus 无反应最常见原因是元素默认不可聚焦，需设 tabindex=”0″ 并确保真正获得焦点；:focus-visible 更精准但兼容性有限；主动聚焦失效常因 DOM 未就绪、disabled/Shadow DOM 等；自定义焦点样式需避免 outline 全局重置并提升选择器权重。
为什么 :focus 看似写了却没反应
最常见原因是元素默认不可聚焦：比如
、
JavaScript 主动聚焦后
tabindex="0"，若未真正获得焦点（如用户没按 Tab 键、也没用 .focus() 主动触发），:focus 就不会激活。浏览器只对“可聚焦且当前拥有焦点”的元素应用该伪类。
检查方式很简单：点击元素后按 Tab，看是否出现虚线框；或者在控制台执行 document.activeElement，确认目标元素是否在返回值中。
- 确保元素有
tabindex属性（tabindex="0"最常用，支持键盘聚焦） - 避免在父元素上设
pointer-events: none或visibility: hidden—— 这些会阻断聚焦链 - 不要用
display: none隐藏元素后再尝试聚焦，它完全脱离渲染树，无法获得焦点
:focus 和 :focus-visible 到底该用谁
现代浏览器中，:focus 会在任何方式获得焦点时都生效（包括鼠标点击），这常导致点击输入框时也触发样式，违背“仅键盘导航才需高亮”的设计意图。而 :focus-visible 是更精准的选择：它只在浏览器判定为“键盘触发的焦点”时匹配。
但注意兼容性：:focus-visible 在 Safari 15.4+ 才稳定支持，旧版需降级回 :focus 并配合 JS 检测。
立即学习“前端免费学习笔记（深入）”；
- 优先用
:focus-visible实现无障碍友好的焦点指示 - 降级方案示例：
input:focus-visible, input.js-focus-visible:focus { outline: 2px solid #007bff; }，再用 JS 检测
KeyboardEvent并添加js-focus-visible类 - 别同时写
input:focus和input:focus-visible且样式冲突——后者可能被前者覆盖
JavaScript 主动聚焦后 :focus 仍不生效的典型原因
调用 element.focus() 后样式没变，大概率是聚焦时机问题：DOM 尚未就绪、或被其他逻辑中断（比如聚焦后立即修改 disabled 或 display）。
