:focus伪类需元素可聚焦且样式未被覆盖；常见失效原因有disabled/readonly、非表单元素无tabindex、CSS优先级冲突；推荐:focus与:focus-visible组合使用以兼顾鼠标与键盘用户，并注意IE/Safari兼容性。
:focus 伪类能选中当前获得焦点的表单项，但不是所有写法都有效——关键在于元素是否真正“可聚焦”，以及样式有没有被覆盖或禁用。
为什么写了 input:focus 却没反应？
最常见原因有三个：
- 输入框处于
disabled或readonly状态，:focus不会触发 - 元素本身不可聚焦：比如自定义
div没加tabindex="0"，也不是原生表单控件 - 样式被更高优先级规则覆盖，尤其是某些 CSS 框架（如 Bootstrap）会重置
outline并隐藏焦点效果
验证方法：用浏览器 DevTools 的 Elements 面板，右键点击元素 → “Force state” → 勾选 :focus，看样式是否生效。如果此时有效，说明是触发条件问题；如果仍无效，说明选择器或优先级出错。
:focus 和 :focus-visible 到底该用哪个？
二者行为差异直接影响键盘用户能否顺畅操作：
立即学习“前端免费学习笔记（深入）”；
-
:focus在任何方式获得焦点时都生效（鼠标点、Tab 键、el.focus()调用） -
:focus-visible只在明确由键盘操作（如 Tab、Shift+Tab）触发时才匹配，鼠标点击不触发
推荐组合写法，兼顾兼容性与可访问性：
input:focus {
outline: none;
}
input:focus-visible {
outline: 2px solid #007bff;
outline-offset: 2px;
}
这样既避免鼠标用户看到突兀外框，又确保键盘导航时有清晰视觉反馈。注意：旧版 Safari 或 IE 不支持 :focus-visible，回退到 :focus 是必须的。
如何让非表单元素也响应 :focus？
普通 div、span 默认不能聚焦，但加一个属性就能启用：
-
tabindex="0"：让它参与自然 Tab 流，点击和键盘都能触发:focus -
tabindex="-1"：只允许通过 JS 调用.focus()或鼠标点击聚焦，不进入 Tab 流 -
contenteditable="true"：使元素变成可编辑区域，自动获得焦点能力
例如：
<div tabindex="0">点击我试试</div>
配合样式：
div[tabindex="0"]:focus {
background-color: #e6f7ff;
border: 1px solid #007bff;
}
用 :focus-within 控制整个表单区域
当需要高亮整个输入组（比如 .form-group 包含 label + input + error），不要给每个子元素单独写 :focus，直接作用于容器：
.form-group:focus-within {
border-color: #007bff;
background-color: #f9f9f9;
}
只要内部任意一个可聚焦子元素（input、textarea、button 等）获得焦点，这个样式就生效。
注意兼容性：Chrome 68+、Firefox 52+、Safari 12+ 支持良好，IE 完全不支持。若需兼容 IE，得用 JS 监听 focusin 事件并手动加 class。
真正容易被忽略的是：很多人只改边框颜色，却没提供足够对比度的替代提示——尤其在深色背景或小屏幕上，纯边框变化可能完全看不见。务必搭配 box-shadow 或背景微调，并检查 WCAG AA 对比度是否 ≥3:1。
