:focus伪类不触发的主因是元素不可聚焦，如原生div/span需设tabindex；仅input/button/a[href]等默认可聚焦元素有效；outline:none会隐藏焦点样式但非失效；:focus-visible需浏览器支持且不替代:focus。
focus伪类不触发的常见原因
不是所有元素默认能获得焦点，:focus 无效往往是因为目标元素本身不可聚焦。原生 <div>、<code><span></span> 这类非表单元素没有 tabindex 就不会响应 :focus。
- 只对可聚焦元素生效：如
<input>、<button></button>、<a href></a>（有 href 时）、带tabindex的任意元素 -
tabindex="-1"允许脚本调用.focus()，但不能通过 Tab 键进入；tabindex="0"纳入自然 Tab 顺序 - Chrome/Firefox 中，
contenteditable="true"元素也支持:focus，但 Safari 对它的支持稍晚（iOS 15.4+ 才稳定） - 如果用了
outline: none却没提供替代焦点样式，视觉上会“消失”，但这不是:focus失效，而是样式被覆盖了
:focus 与 :focus-visible 的关键区别
:focus 只看是否获得焦点，不管怎么来的；:focus-visible 是浏览器根据用户交互意图智能判断——键盘操作才显示，鼠标点击默认不触发。这对可访问性很关键，但兼容性得留意。
-
:focus-visible在 Chrome 86+、Firefox 86+、Safari 15.4+ 支持，旧版 Safari 需用@supports selector(:focus-visible)降级 - 不要用
:focus-visible完全替代:focus：屏幕阅读器用户可能用键盘导航，但某些辅助技术仍依赖:focus - 若同时写
input:focus和input:focus-visible，后者优先级更高（同选择器权重下，后声明的覆盖前声明） - 禁用
:focus-visible的“自动判断”行为？可以加focus-visible: auto到根元素，但不推荐——它绕过了浏览器的可访问性逻辑
表单控件中 focus 样式被重置的典型场景
很多 CSS 重置库（如 Normalize.css、Tailwind 的 base styles）或组件库会主动清除 outline，导致你写的 :focus 看不见，其实规则已生效，只是没视觉反馈。
- 检查 computed styles：看
outline是否为none或0px，而不是只看自己的 CSS 文件 - 用
outline: 2px solid #007aff比border更安全——border会改变布局尺寸，outline不占空间且符合 WCAG 聚焦指示要求 - 移动端 iOS Safari 默认给
input加蓝色外发光，但一旦设了outline，这个默认效果就没了，得手动补足对比度（至少 3:1） - 避免用
!important强行覆盖 outline：它会让后续的可访问性工具或用户自定义样式失效
JavaScript 中 focus() 调用失败的几个硬限制
不是所有 .focus() 调用都会成功，浏览器有明确的策略阻止“非用户发起”的聚焦，尤其涉及模态框、iframe 或异步时机。
立即学习“前端免费学习笔记（深入）”；
- 页面未激活（比如标签页在后台）时调用
.focus()会被静默忽略 - 在
setTimeout或 Promise resolve 后立即调用，可能因渲染未完成而失败；稳妥做法是包一层requestAnimationFrame或监听focusin回调确认 - iframe 内容未加载完成时，其中元素的
.focus()会抛DOMException: Failed to execute 'focus' on 'HTMLElement' - 使用
autofocus属性比 JS 调用更可靠，但它只在元素插入 DOM 时生效一次，动态渲染的元素得靠 JS 补位
最常被忽略的一点：当父容器设置了 overflow: hidden 且子元素聚焦后溢出视口，焦点虽存在，但焦点样式可能被裁剪——这时候要检查容器的 clip-path、transform 或 contain 属性是否意外干扰了焦点指示的渲染。
