chrome中:focus表现不一致的根本原因是未控制好“谁在聚焦”和“焦点样式被谁覆盖”；需统一border声明、确保js聚焦时机合法、正确使用:focus-visible并避免无效语法。
Chrome 里 :focus 表现不一致，根本原因不是浏览器 Bug，而是你没控制住「谁在聚焦」和「焦点样式被谁覆盖」这两件事。
为什么鼠标点完 input 后 :focus 样式一闪就没了
这不是 :focus 失效，是 Chrome 默认的 outline 在干扰。它会在点击后短暂显示，然后被后续样式或 UA 样式覆盖掉——尤其当你写了 outline: none 却没补全 border 或其他视觉反馈时，就会出现“闪一下又消失”的错觉。
- 检查 DevTools 的 Computed 面板，确认
outline是否真被清除，且border、box-shadow等替代样式已生效 - 别只写
input:focus { outline: none; border-color: #007bff; }——如果默认状态没定义border，非聚焦态可能直接退化为border: 0 - 稳妥做法：先统一声明
input { border: 1px solid #ced4da; }，再在:focus中仅改颜色或加阴影
为什么调用 element.focus() 后 :focus 不触发
常见于 JS 动态插入元素或 React/Vue 组件中。Chrome 要求 focus 必须发生在「用户可感知的交互上下文」内，否则会静默拒绝。
- 确保
focus()执行前，元素已挂载、display不为none、且未设disabled - 若在
setTimeout或事件回调中调用，建议包一层requestAnimationFrame，等渲染帧就绪再聚焦 - Shadow DOM 内的元素，外部 CSS 的
:focus规则默认不生效；必须把样式放进<style></style>标签内，或用::slotted(input:focus)
为什么 :focus 和 :focus-visible 在同一元素上打架
Chrome（86+）同时支持两者，但它们的匹配逻辑不同：:focus 是“只要获得焦点就匹配”，:focus-visible 是“只在键盘触发时才匹配”。如果你写了两条规则且特异性相同，后声明的会覆盖前一条。
- 错误写法：
input:focus { outline: none; } input:focus-visible { outline: 2px solid #007bff; }—— 若用户鼠标点击，:focus生效但:focus-visible不匹配，结果是没 outline - 正确组合：
input:focus { outline: none; } input:focus-visible { outline: 2px solid #007bff; outline-offset: 2px; }，并确保有降级 fallback（如引入js-focus-visible） - 别把
:focus和:focus-visible混在同一个选择器里，比如input:focus:focus-visible，这是无效语法
真正难处理的不是 Chrome 本身，而是你没意识到：它的 :focus 行为始终严格遵循规范，但你的样式层、JS 聚焦时机、DOM 结构、甚至框架的渲染节奏，都在悄悄改写它的表现边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
