:focus样式不生效的根本原因是元素不可聚焦；需检查是否disabled、tabindex设置不当、CSS禁用交互或样式被覆盖，并注意移动端焦点行为差异。
如果 :focus 样式在 或 上不生效，通常不是 CSS 写错了，而是元素本身无法获得焦点。聚焦失效的核心原因在于：该元素不可聚焦（not focusable）。
检查元素是否默认可聚焦
绝大多数 （如 type="text"、"email"、"password"）和 默认就是可聚焦的，但以下情况会使其失去聚焦能力：
-
设置了
disabled属性 —— 被禁用的表单控件无法聚焦，也不会触发:focus -
设置了
readonly且未显式设置tabindex——readonly元素仍可聚焦（除非被其他逻辑阻止），但某些旧浏览器或特定样式可能干扰 -
父容器或自身有
tabindex="-1"—— 这会让元素无法通过 Tab 键进入，但可通过 JS.focus()手动聚焦；若完全不想被聚焦，应避免该值用于输入框 -
CSS 中设置了
pointer-events: none或visibility: hidden—— 元素不可交互，自然无法获得焦点
确认 tabindex 是否被意外覆盖
tabindex 控制元素能否被键盘聚焦及聚焦顺序。输入框默认 tabindex=0（可聚焦且按 DOM 顺序参与 tab 流）。需排查：
- 是否在 HTML 中写了
tabindex="-1"？这会使它不能通过 Tab 进入，仅支持 JS 聚焦 - 是否在 JS 中动态设置了
el.tabIndex = -1？检查初始化或状态更新逻辑 - 是否全局重置了
tabindex（例如某些 UI 框架或重置样式）？可用浏览器开发者工具检查计算后的tabIndex值
验证 :focus 样式是否被更高优先级规则覆盖
即使元素能聚焦，:focus 样式也可能被其他 CSS 覆盖。建议：
立即学习“前端免费学习笔记（深入）”；
- 在开发者工具中选中元素，切换到
:focus状态，看样式面板里该规则是否被划掉（表示被覆盖） - 避免使用过于宽泛的选择器（如
input:focus被.form-control:focus覆盖时，后者优先级更高） - 必要时提高特异性，例如写成
input[type="text"]:focus或加!important（仅调试用，不推荐线上滥用）
注意移动端与伪类触发方式差异
在部分 iOS Safari 或 Android WebView 中，:focus 可能不会在点击后立即生效，尤其当：
- 页面启用了
user-scalable=no或缩放限制，影响焦点行为 - 元素被包裹在
contenteditable="true"容器内，导致焦点逻辑异常 - 使用了第三方库（如某些日期选择器、富文本编辑器）接管了原生焦点事件
- 尝试用鼠标点击却无反应？请确认是否在触摸设备上测试——点击即聚焦，无需额外操作
确保可聚焦是前提，再谈样式生效。先移除 disabled、检查 tabindex、验证交互状态，最后再调样式。不复杂但容易忽略。
