必须保留或替换为清晰、高对比的焦点样式，因为删除:focus outline会剥夺键盘用户的导航提示，违反wcag 2.4.7焦点可见性要求，导致不可访问；应使用outline而非border，确保对比度≥3:1，并合理结合:focus-visible实现渐进增强。
直接结论：只写 :focus 但清掉 outline 又不补视觉反馈，等于关掉了键盘用户的导航灯——必须保留或替换为清晰、高对比的焦点样式。
为什么 :focus 样式一删就出问题？
浏览器默认给聚焦元素加 outline，不是为了“丑”，而是为了告诉键盘用户“你现在在这儿”。很多 reset.css 或自定义样式里一句 * { outline: none; }，就把这层提示全干掉了。鼠标用户无所谓，但对依赖 Tab 导航、屏幕阅读器或仅用键盘操作的人，页面立刻变“黑盒”。
- 焦点状态不可见 → 用户无法确认当前操作位置，反复按 Tab 也找不到目标
- 即使元素有
tabindex="0"，没有视觉反馈 = 实际不可访问 - WCAG 2.4.7（焦点可见性）明确要求：键盘焦点指示必须清晰、持久、对比度 ≥ 3:1
:focus 样式怎么写才真正有用？
关键不是“有没有”，而是“能不能被一眼识别”。别只改颜色，要综合尺寸、对比、持续性：
- 用
outline而非border：它不占布局空间，不会导致页面抖动；推荐写法：outline: 2px solid #0066cc;+outline-offset: 2px; - 避免纯色填充背景：深色背景上用浅色
outline，浅色背景上用深色，确保对比达标 - 慎用
box-shadow单独替代：部分屏幕阅读器和高对比模式下可能忽略它，outline是最稳妥的基础 - 对图片、图标等非表单元素，必须加
tabindex="0"才能触发:focus，否则样式无效
什么时候该用 :focus-visible 而不是只靠 :focus？
不是所有场景都需要“鼠标点一下也亮边框”。如果你希望鼠标用户界面干净、键盘用户反馈明确，就得组合用：
- 必须先写
button:focus { outline: none; }，再写button:focus-visible { outline: 2px solid #007aff; outline-offset: 2px; } - 顺序不能反：旧浏览器（如 Safari 15.3 及更早）会直接跳过整条
:focus-visible规则，只执行前面的:focus，这是唯一可靠的降级路径 - 如果全局清了
outline，:focus-visible也会失效——得在它里面显式恢复outline -
div[role="button"]这类自定义控件，光加tabindex="0"不够，还得监听keydown（如 Enter/Space），否则部分浏览器不激活:focus-visible
调试时最容易漏掉的三个检查点
写了样式却没反应？别急着改 CSS，先看这几处：
- 用 DevTools 的 Elements 面板手动勾选元素的
:focus和:focus-visible状态，比反复切键盘更快验证是否匹配 - 运行
console.log(document.activeElement)，确认焦点真落在目标元素上，且它的tabIndex≥ 0、未被disabled - 检查是否用了
tabindex="-1"：它允许 JS 聚焦，但首次 Tab 进入时多数浏览器不触发:focus-visible
真正难的不是写对一行 CSS，而是让每个可交互元素在任意输入方式下都有确定、一致、可感知的状态反馈——尤其当用户不碰鼠标时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
