:focus 直接生效但易污染全局、损害可访问性；失效主因是 outline: none 未替代、动态元素未就位、显隐属性阻断、权重覆盖、语义类型未区分；推荐用 :focus-visible 区分键盘/鼠标聚焦，并适配高对比模式。
直接用 :focus 就能生效，但不加限制容易污染全局、破坏可访问性，尤其在移动端和键盘导航场景下。
为什么 :focus 有时没反应？
常见原因不是写法错，而是被其他样式覆盖或触发条件不满足：
-
outline: none被提前设了，又没提供替代聚焦反馈（屏幕阅读器和键盘用户会“失联”） - 元素是动态插入的（比如 Vue/React 渲染后才出现），CSS 规则已加载，但 DOM 还没就位
- 用了
display: none或visibility: hidden控制显隐，autofocus 和 focus() 都会失效 - 多个
:focus规则权重相同，后定义的覆盖了前面的——检查浏览器开发者工具的“Computed”面板
input[type="search"] 和普通 input 的聚焦样式要分开写
因为语义不同，浏览器默认行为也有差异（比如 Safari 对 type="search" 有内置清空按钮和圆角）。混用选择器容易漏掉细节：
- 通用写法：
input:focus, textarea:focus覆盖大部分，但无法区分搜索框的交互预期 - 推荐写法：
input[type="text"]:focus、input[type="search"]:focus、textarea:focus各自独立控制 - 特别注意：
input[type="search"]在 iOS Safari 中可能忽略outline，得靠box-shadow或border-color做主反馈
聚焦动画必须配 transition，但别全属性过渡
只过渡真正变化的属性，否则会拖慢渲染或触发意外重绘：
- 安全组合：
transition: border-color 0.2s ease, box-shadow 0.2s ease; - 避免写
transition: all 0.3s;—— 它会让transform、opacity等非聚焦相关属性也参与动画，可能卡顿 - 如果用了
scale(1.02)，记得加will-change: transform;（仅当真需要时），否则浏览器不会优化该层 - 移动端慎用
transform+focus：部分安卓 WebView 会在软键盘弹出时重置缩放
键盘聚焦和鼠标聚焦得区分对待
用户用 Tab 导航时需要强对比轮廓，点鼠标时反而觉得多余。用 :focus-visible 是目前最稳妥的解法：
- 基础结构：
input { outline: none; } input:focus-visible { outline: 2px solid #007bff; outline-offset: 2px; } - 不支持
:focus-visible的旧浏览器（如 IE、老版 Safari）会回退到:focus，所以仍需保留兼容写法 - 别用 JS 模拟：比如监听
keydown判断是否按了 Tab 再加类——不可靠，且破坏原生焦点管理逻辑 - 测试要点：纯键盘操作（Tab / Shift+Tab）必须看到轮廓；鼠标点击输入框，轮廓不应出现
最常被跳过的其实是高对比度模式下的表现——哪怕加了 outline，如果颜色太浅或没 offset，在 Windows 高对比主题下依然看不见。上线前务必打开系统级高对比设置跑一遍表单流程。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
