:focus没反应的最常见原因是元素默认不可聚焦，需添加tabindex="0"；验证方法是检查document.activeElement；还需排除pointer-events、visibility、display:none等影响，并注意:focus-visible的触发条件及outline替换方案。
鼠标点击后:focus没反应，不是代码写错了
最常见原因是浏览器把:focus当作“焦点状态”而非“点击反馈”，而很多元素（比如
div:focus { background: red; }，只要没给div加tabindex="0"，点击它时:focus压根不会匹配——因为DOM里它连“可聚焦”资格都没有。
验证方法很简单：点击目标元素后，在控制台执行document.activeElement，如果返回的不是它，说明:focus不可能生效。
- 确保元素有
tabindex="0"（别用-1，它不参与Tab流，鼠标点也不触发:focus） - 检查父容器有没有
pointer-events: none或visibility: hidden，这些会切断聚焦链 - 别在
display: none状态下调用.focus()，它完全脱离渲染树，无法聚焦
:focus和:focus-visible在鼠标点击时的行为差异
:focus只要元素获得焦点就生效，包括鼠标点击；但现代浏览器（Chrome/Firefox/Safari）对:focus-visible做了启发式判断：如果页面首次交互是鼠标，后续Tab导航可能暂时不触发它，直到用户按Tab或Esc。这不是bug，是UA逻辑。
所以如果你写了input:focus-visible却在鼠标点完没看到样式，先别改CSS——打开DevTools → Elements → 点击右上角:hov → 手动勾选:focus-visible，看样式是否能显示。能显示，说明CSS没问题，只是当前上下文不满足触发条件。
立即学习“前端免费学习笔记（深入）”；
- 真正可靠的测试路径：页面加载完成 → 不碰鼠标 → 直接按
Tab→ 观察第一个可聚焦元素 - 移动端Safari在软键盘弹出前，
input获得焦点也不会触发:focus-visible，这是已知限制 - 别同时写
input:focus和input:focus-visible且样式冲突，后者优先级更高，容易覆盖前者
为什么outline被清掉了，:focus看起来还是没效果
很多人加了outline: none后发现:focus样式“消失”，其实是默认焦点环被干掉了，但没补上替代方案。浏览器默认的outline会叠在你自定义的边框或背景上，尤其在Chrome/Firefox中特别明显，反而掩盖了你的样式。
正确做法不是简单删掉outline，而是替换它：outline: 2px solid #007bff + outline-offset: 2px，或者更稳妥地用box-shadow: 0 0 0 2px rgba(0, 123, 191, 0.25)——它不改变盒模型，适配圆角也自然，还避开了iOS Safari对outline的渲染异常。
- 别用
border做焦点高亮，border-width变化会导致布局跳动 - 如果用了
transition，必须明确声明被过渡的属性，比如transition: box-shadow 0.2s ease，只写all容易拖慢性能 - iOS Safari对
input[type="number"]的上下箭头点击不触发:focus，得点输入区域本身
Shadow DOM或disabled状态让:focus彻底失效
如果元素在Shadow Root里，外部CSS里的:focus规则默认无法穿透作用域；如果元素被设为disabled，它连焦点都拿不到——readonly还能聚焦，disabled则完全不行。
JS主动聚焦后样式没变，大概率是时机问题：DOM还没挂载好，或者聚焦后立刻被其他逻辑中断（比如disabled状态切换、display从block切到none）。
- 确保
element.focus()调用发生在元素已挂载且display不为none之后，可用requestAnimationFrame延迟一帧 - Shadow DOM内需在shadowRoot中注入样式，或用
::slotted()配合:focus - 自定义组件（如封装的开关）要支持:focus-visible，光加
tabindex="0"不够，还得有role+ 监听onkeydown响应Enter/Space
真正麻烦的不是写错选择器，而是:focus依赖的是浏览器对“焦点状态”的真实判定——它不看你点了几次鼠标，只看那个元素此刻是不是document.activeElement。任何阻断聚焦链、干扰DOM状态或绕过可访问性逻辑的操作，都会让样式停在半路。
