:focus-outline未消失主因是浏览器默认样式优先级高或选择器不具体；应使用高权重选择器、避免全局禁用、慎用!important，优先采用:focus-visible实现键盘/鼠标差异化聚焦反馈。
focus时outline没消失？检查是否被浏览器默认样式覆盖
很多情况下加了 outline: none 却还是看到蓝色/黑色轮廓线，根本原因是浏览器的默认聚焦样式（比如 Chrome 的 outline: -webkit-focus-ring-color auto 1px）优先级更高，或者写在了错误的选择器上。
实操建议：
- 必须用足够具体的选择器覆盖，比如给按钮加
button:focus，而不是只写:focus - 确保样式表加载顺序靠后，或加
!important（仅限调试阶段验证，上线前应优先提升选择器权重） - 某些旧版 Safari 对
outline: none支持不稳定，可搭配outline: 0双写
outline: none 影响可访问性，别全局禁用
键盘用户依赖 outline 知道当前焦点在哪。直接全站写 *:focus { outline: none } 会切断这部分用户的操作路径，不是“隐藏丑”，而是“让用户迷路”。
正确做法：
立即学习“前端免费学习笔记（深入）”；
- 只对明确有替代聚焦反馈的元素禁用，比如已有
box-shadow或背景色变化的按钮 - 用
:focus-visible做条件控制：只在鼠标点击时不显示轮廓，保留键盘聚焦时的 outline - 示例：
button:focus:not(:focus-visible) { outline: none; }—— 这样鼠标点开菜单后不会突兀亮边，但 Tab 导航时依然可见
Firefox 中 outline 不消失？检查是否用了 -moz-appearance
Firefox 对某些表单控件（如 <select></select>、<input type="number">）应用了 -moz-appearance: menulist-button 等原生样式，会强制渲染 outline，即使写了 outline: none 也无效。
解决方式：
- 先重置外观：
-moz-appearance: none - 再设轮廓：
outline: none - 注意：重置后需手动补全边框、圆角、背景等视觉样式，否则看起来像“消失了”
- 部分控件（如
<textarea></textarea>）在 Firefox 中 outline 位置偏移，可用outline-offset: -2px微调
React/Vue 项目里动态元素 outline 失效？留意渲染时机
组件首次挂载或条件渲染后，如果元素是 JS 动态插入的（比如 Modal 弹出后才渲染的按钮），它的 focus 状态可能没被 CSS 规则捕获到，尤其当使用了 contentEditable 或自定义 focus 管理逻辑时。
排查重点：
- 确认元素真实存在 DOM 中，且没有被
display: none或visibility: hidden遮挡 - 检查是否在 focus 前就执行了
element.blur()，导致样式来不及生效 - 在 React 中，避免在
useEffect里异步 focus 后立刻移除 outline 类名，应确保 class 存在时 focus 已完成
:focus-visible 的兼容性边界——它在 Safari 15.4+ 才支持，而旧版 Safari 会完全忽略该伪类，导致键盘用户失去焦点提示。如果目标用户包含大量 macOS 老系统用户，得准备降级方案，比如用 JS 检测键盘操作再切 class。 
