:focus 伪类生效需元素可聚焦且未被禁用或只读，常见失效原因包括 disabled/readonly 状态、缺少 tabindex 或被高优先级样式覆盖；推荐统一处理 input:focus, textarea:focus, select:focus 并清除 outline，兼顾可访问性时可用 :focus-visible 回退方案。
直接用 :focus 就能生效，但浏览器默认焦点样式（比如 Chrome 的蓝色外框）常会干扰设计，必须显式覆盖；否则即使写了 :focus 样式，也可能被用户完全看不到。
为什么写了 :focus 却没反应？
最常见原因是：输入框被禁用（disabled）、只读（readonly），或元素本身不可聚焦（比如没加 tabindex 且不是原生表单控件）。另外，某些 CSS 框架（如 Bootstrap）会重置 :focus 样式，需检查是否被更高优先级规则覆盖。
- 确认元素有
tabindex="0"或是原生可聚焦元素（<input>、<textarea></textarea>、<button></button>等） - 用浏览器 DevTools 的 “Elements” 面板手动点击元素，再选中 “:focus” 强制触发伪类，验证样式是否被写错或被覆盖
- 避免只写
input:focus—— 若有多种输入类型（type="email"、type="number"），建议用input:focus, textarea:focus, select:focus统一处理
:focus 和 :focus-visible 怎么选？
:focus 在任何方式获得焦点时都触发（鼠标点击、Tab 键、JS .focus()），而 :focus-visible 只在“明确由键盘操作触发”时生效（例如按 Tab），对鼠标点击无效。这对可访问性很关键：你可能只想给键盘用户强化视觉反馈，而不干扰鼠标用户的界面干净度。
- 想统一控制所有焦点状态 → 用
:focus，但记得同时清除默认 outline：outline: none - 想保留鼠标点击的简洁感，只增强键盘导航体验 → 用
:focus-visible，且建议配合:focus回退（因为旧浏览器不支持）：
input:focus {
outline: none;
}
input:focus-visible {
outline: 2px solid #007bff;
}
常用且安全的 :focus 样式组合
单纯改边框颜色容易被忽略，尤其在深色背景或小尺寸屏幕上。推荐组合使用边框、阴影和背景微调，确保对比度达标（WCAG AA 要求至少 3:1）。
立即学习“前端免费学习笔记（深入）”；
- 别只改
border-color，加上box-shadow提升辨识度：box-shadow: 0 0 0 2px rgba(0, 123, 191, 0.25) - 避免用纯色填充背景（如
background: #eef7ff），可能影响文字可读性；若真要改背景，用极浅透明色更稳妥 - 移动端 Safari 对
:focus触发较保守，有时需加input:focus { outline: none; }+-webkit-appearance: none才稳定生效 - 如果用了 CSS-in-JS 或 Shadow DOM，注意样式作用域 ——
:focus是在元素自身上生效，不是父容器
真正难的不是写对 :focus，而是判断什么时候不该用它：比如表单校验错误时，焦点样式该和错误态叠加还是分离？这时候往往得靠 JS 控制 class 切换，而不是只依赖伪类。
