:focus没反应常因默认outline覆盖，需用outline:none清除并替换为可访问的焦点样式；:focus-within实现容器内任一子元素聚焦即响应；:focus-visible仅键盘操作生效，需配合:focus:not(:focus-visible)隔离样式；ios safari对:focus支持有限，需用js fallback确保可用性。
focus 伪类为什么没反应？检查是否被 outline 覆盖
很多情况下写好了 :focus 样式却看不到效果，不是选择器写错，而是浏览器默认的 outline 在“抢戏”。它会叠在你自定义的边框或背景上，尤其在 chrome/firefox 中表现明显。
- 先加
outline: none或outline: 0清除默认焦点环（但别直接全删，可移到其他位置） - 如果用
border模拟焦点，注意border-width变化可能引起布局抖动，建议提前预留border空间（比如默认设border: 2px solid transparent） - 无障碍要求不能真去掉焦点指示——可以用
outline: 2px solid #007bff替换，再配合outline-offset: 2px微调位置
focus-within 能解决什么实际问题？表单组联动高亮
:focus-within 是真正能提升表单体验的隐藏利器。它让整个 <div class="form-group"> 在内部任意控件获得焦点时统一响应，不用给每个 <code><input> 单独写 JS 绑定。
- 适用场景：带标签、提示文字、错误信息的复合表单区域，比如登录页的邮箱输入区
- 和
:focus最大区别是：它不依赖当前元素本身聚焦，而是“容器内任一可聚焦子元素聚焦”就触发 - 兼容性要注意：IE 完全不支持，Safari 从 15.4+ 才稳定，如需兼容老版本得 fallback 到 JS 监听
focusin事件 - 示例：
.form-group:focus-within label { color: #007bff; }—— 输入框一聚焦，对应 label 马上变色
focus-visible 是不是可以替代 JS？小心默认行为差异
:focus-visible 的目标很明确：只在用户**用键盘操作**（Tab/Shift+Tab）聚焦时生效，鼠标点击时不触发。但它不是“开箱即用”的平替方案。
- 它不会自动禁用鼠标点击下的
:focus，需要手动把:focus改成:focus:not(:focus-visible)来隔离样式 - Chrome 和 Firefox 行为基本一致，但 Safari 对某些元素（如自定义
contenteditable）识别不准，容易漏触发 - 如果你用了
outline: none又没配:focus-visible，键盘用户会彻底丢失焦点位置——这是最常被忽略的可访问性断裂点 - 推荐组合：
input:focus { outline: none; } input:focus-visible { outline: 2px solid #007bff; outline-offset: 2px; }
移动端 focus 样式失效？iOS Safari 的特殊限制
iOS Safari 默认禁止非可交互元素（比如 div、span）获得焦点，连 tabindex 都不一定管用；而且软键盘弹出后，焦点样式可能被系统 ui 覆盖或重置。
立即学习“前端免费学习笔记（深入）”；
- 确保目标元素有
tabindex="0"，且没有-webkit-user-select: none这类阻止交互的样式 - 不要依赖
:focus做关键状态反馈（比如必填校验提示），改用 JS 监听focus事件 + 添加 class 更可靠 - 在
meta viewport中避免user-scalable=no，否则部分 iOS 版本会抑制焦点样式渲染 - 测试时务必真机连接 Safari 开发者工具，模拟器经常无法复现真实焦点行为
事情说清了就结束。focus 类名看着简单，但每一步都卡在浏览器实现细节和可访问性边界上。