这不是样式写错，而是:focus本就响应所有聚焦方式（含鼠标点击），若要鼠标点击不触发高亮，须改用:focus-visible并配合:focus兜底；后者必须先声明以保障旧浏览器可访问性。
直接说结论：这不是样式写错了，而是:focus本就该在鼠标点击后生效——它响应所有聚焦方式，包括点击。想让鼠标点击不触发高亮，必须换用:focus-visible，且不能丢掉:focus兜底。
为什么鼠标点完输入框还留着蓝边或阴影？
这是:focus的正常行为：只要元素获得焦点（不管用 Tab、鼠标点击还是 JS .focus()），样式就立刻激活。浏览器默认给input加outline，你写了input:focus { outline: 2px solid blue; }，点一下它就聚焦、样式就上；松开手，焦点没移走，蓝边当然不消失。
常见错误现象包括：
- 用户点输入框后，高亮轮廓一直挂着，直到点别处才消失
- 移动端 iOS Safari 上点击后轮廓卡住，常因
blur被 JS 阻止或事件冒泡干扰 - 自定义组件里用了
pointer-events: none却还指望:focus生效
如何让鼠标点击不显示焦点样式？
靠:focus-visible，但它不能单独存在。必须和:focus配合，顺序不能错：
立即学习“前端免费学习笔记（深入）”；
-
:focus先写，提供基础视觉反馈（哪怕只是outline: 1px dotted transparent） -
:focus-visible后写，专门强化键盘用户的焦点环（比如更粗的box-shadow） - 若只写
:focus-visible而没:focus，部分浏览器会完全不渲染任何焦点样式
示例：
input:focus {
outline: none;
}
input:focus-visible {
box-shadow: 0 0 0 3px rgba(0, 123, 191, 0.25);
}
注意：rgba(0, 123, 191, 0.25)里的透明度控制柔和感；设为1会显得生硬。
:focus-visible为什么有时点了也不触发？
这不是 bug，是浏览器 UA 启发式判断逻辑在起作用：如果页面首次交互是鼠标（比如加载完立刻点按钮），Chrome/Firefox 会进入“指针优先”模式，后续 Tab 导航可能暂时不激活:focus-visible，直到用户按Tab或Esc。
验证方法很简单：
- 打开 DevTools → Elements 面板 → 选中目标元素 → 点击右上角
:hov按钮 → 手动勾选:focus-visible，看样式是否生效 - 别依赖“点完再按 Tab”测试：此时仍可能判定为延续指针会话，
:focus-visible不触发 - 真正可靠的测试路径是：页面加载 → 直接按
Tab（不碰鼠标）→ 观察第一个可聚焦元素
自定义组件怎么支持:focus-visible？
加tabindex="0"远远不够。浏览器会拒绝给无语义或无交互能力的元素启用:focus-visible判断逻辑。必须同时满足三个条件：
- 有明确角色：
role="button"、role="switch"等可交互 ARIA role - 监听键盘事件：
onkeydown中至少处理Enter或Space，否则浏览器认为“这个元素不响应键盘” - 确保可获得焦点：不能被
pointer-events: none或visibility: hidden阻断
例如一个封装的开关组件，只写<div tabindex="0" role="switch">是不够的；必须加上onkeydown={handleKeydown}，且handleKeydown至少能响应Enter，否则 Chrome 89+ 会静默忽略该元素的:focus-visible匹配。
复杂点在于：不同浏览器对“首次交互类型”的判定逻辑不一致，且移动端 Safari 在软键盘弹出前不会触发:focus-visible——这不是 Polyfill 能绕过的限制，得靠设计妥协或降级方案兜底。
