:focus 失效最常见原因是元素无法聚焦（如 disabled/readonly、pointer-events: none）或 css 优先级被覆盖；需用开发者工具验证聚焦状态、排除 js 干扰，并注意不同表单控件及浏览器的兼容性差异。
为什么 :focus 在输入框上完全没反应
最常见原因是元素本身无法获得焦点：比如 input 被设了 disabled 或 readonly（除非显式加 tabindex），或者父容器用了 pointer-events: none 阻断了事件。另外，CSS 优先级被更高权重的规则覆盖（如内联样式或 !important 冲突）也会让 :focus 看似“失效”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具检查元素是否真能聚焦：点击输入框后看
:focus是否出现在 Styles 面板的伪类列表中 - 临时移除所有自定义 CSS，只保留
input:focus { outline: 2px solid red; }测试基础行为 - 确认没有 JavaScript 调用
element.blur()或拦截focus事件
input[type="text"] 和 textarea 的 :focus 行为差异
两者默认都支持 :focus，但 textarea 在某些旧版 Safari 中可能对 outline 渲染异常；而 input[type="number"] 在 Chrome 中点击上下箭头时不一定触发 :focus（需点击输入区域本身）。另外，contenteditable 元素不能直接用 input:focus，得用 [contenteditable]:focus。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 对所有可编辑表单控件统一写：
input:focus, textarea:focus, select:focus, [contenteditable]:focus - 避免仅依赖
outline做视觉反馈——它可能被用户系统设置强制隐藏，改用box-shadow或border-color - 若要兼容
input[type="range"]，需额外加input[type="range"]:focus::-webkit-slider-thumb控制滑块焦点样式
用 :focus-within 替代嵌套 :focus 的典型场景
当输入框在某个容器内（如带图标的搜索框），你想让整个容器在输入框聚焦时变色，但又不想给每个子元素都写 :focus，这时 :focus-within 就比监听多个 :focus 更可靠。它会在任意后代获得焦点时触发，且原生支持表单控件内部聚焦（比如 select 展开选项时）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 写法示例：
.search-container:focus-within { border-color: #007bff; }，里面放input和button都没问题 - 注意兼容性：IE 完全不支持，Edge 16+、Chrome 60+、Firefox 52+ 支持；如需兼容 IE，得用 JS 监听
focusin/focusout - 不要和
:focus混用在同一选择器里，比如div:focus-within input:focus逻辑冗余且无意义
移动端 Safari 中 :focus 样式延迟或不触发
iOS Safari 默认只有在用户真实点击（非 programmatic focus）且页面未禁用缩放时才触发 :focus。如果页面 meta viewport 里写了 user-scalable=no，部分机型会抑制焦点样式；另外，软键盘弹出后焦点可能被重置，导致样式闪退。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保 viewport 设置允许缩放：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 对关键交互元素加
tabindex="0"，哪怕它不是表单控件，也能稳定触发:focus - 慎用
autofocus—— iOS 上它常被忽略，且可能干扰首次点击体验
