:focus伪类失效主因是元素不可聚焦，如div需加tabindex="0"；Safari存在触发时机严格、部分type失效等问题；动画应选border-color等可过渡属性，兼顾可访问性需用box-shadow替代outline并确保键盘导航可见。
focus伪类为什么没生效
最常见的原因是元素本身不支持 :focus，比如 <div> 默认不可聚焦。只有表单控件（<input>、<textarea>、<select>）或加了 tabindex 的元素才能触发 :focus。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查目标元素是否为原生可聚焦标签；如果不是，加上
tabindex="0" - 避免用
outline: none后不提供替代焦点样式——这会破坏可访问性，也容易误以为:focus失效 - 某些 CSS 重置库（如 Normalize.css）会默认清除
outline，需手动恢复或改用box-shadow模拟
transition动画卡顿或不触发
transition 只对可计算的、支持动画的 CSS 属性起作用。像 display、height（从 0 到 auto）、visibility 这类属性无法平滑过渡。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 聚焦动画优先用
border-color、box-shadow、transform、opacity等硬件加速友好属性 - 写法必须完整：比如
transition: border-color 0.2s ease, box-shadow 0.2s ease；只写transition: all 0.2s容易拖慢性能且不可控 - 确保初始状态和
:focus状态都明确声明了被过渡的属性值，否则浏览器无法插值
input:focus + transition 在 Safari 上失效
Safari 对 :focus 的触发时机更严格：点击输入框时可能先触发 :focus，但若鼠标快速移开，动画来不及播完就被中断；另外，iOS Safari 默认禁用非 input 类型的 :focus 样式（如 type="number" 或自定义 contenteditable）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
<input>显式设置type，避免用type="text"以外又未适配的类型（如type="search"在部分 Safari 版本中表现异常） - 加一层
will-change: border-color或transform提前提示渲染引擎优化 - 必要时用 JS 监听
focusin/focusout事件补一层 class 控制动画，绕过伪类兼容问题
如何让聚焦动画兼顾可访问性
纯靠颜色变化（比如边框变蓝）对色觉障碍用户几乎不可见；而仅依赖 outline 又难看、难定制。真正可用的方案得同时满足视觉反馈 + 键盘导航识别 + 屏幕阅读器感知。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
box-shadow替代outline：它可自由控制大小、模糊、颜色，且不影响布局 - 保留
outline: none仅在有足够强的替代样式后才启用，否则必须留着原生outline - 测试键盘 Tab 导航时能否清晰看到当前焦点位置——这是比“动画好不好看”更关键的判断标准
最常被忽略的一点：动画持续时间别超过 0.3 秒。太快用户感知不到，太慢则干扰操作节奏，尤其在表单连续填写场景下。
