:focus伪类用于选中获得焦点的元素，提升键盘导航的可访问性；应自定义清晰的视觉反馈如高对比度outline、box-shadow或背景色变化，避免直接移除默认样式；建议使用:focus-visible在键盘操作时显示焦点框，兼顾美观与可用性，确保所有用户都能感知当前操作元素。
当用户通过键盘操作网页时，:focus 伪类能显著提升可访问性和交互体验。合理使用它，可以让界面更友好、更直观。
什么是:focus伪类？
:focus 是CSS中的一个动态伪类，用于选中当前获得焦点的元素，通常适用于表单输入框、按钮、链接等可交互元素。用户通过Tab键导航或点击输入时，该状态会被触发。
默认情况下，浏览器会为聚焦元素添加轮廓（outline），但很多开发者直接清除它，这会影响键盘用户的体验。正确的做法是自定义一个清晰且美观的焦点样式。
提供清晰的焦点视觉反馈
确保用户能一眼看出当前操作的是哪个元素。可以通过以下方式增强视觉提示：
立即学习“前端免费学习笔记（深入）”；
- 设置明显的outline，比如使用高对比度颜色
- 结合box-shadow实现柔和的发光效果
- 调整背景色或边框以强化状态变化
outline: 2px solid #0066cc;
outline-offset: 2px;
box-shadow: 0 0 5px rgba(0, 102, 204, 0.3);
}
避免移除默认焦点样式
很多重置样式表会写 outline: none，这对鼠标用户影响不大，但对键盘和辅助技术用户极不友好。如果确实需要隐藏默认样式，请务必替换为其他等效的视觉反馈。
例如，在去除outline后，通过改变边框、背景或添加图标来标明焦点状态，确保所有用户都能感知到当前聚焦位置。
针对不同设备优化焦点显示
在触屏设备上，:focus可能频繁触发或不易察觉。可以结合 @media (hover: hover) 或 :focus-visible 来智能控制焦点样式的显示。
:focus-visible 能判断何时应显示焦点框——仅在键盘导航时出现，鼠标点击时不显示，兼顾美观与可用性。
button:focus-visible {outline: 2px dashed #0055aa;
outline-offset: 2px;
}
基本上就这些。善用:focus不是为了炫技，而是让产品对所有人更易用。一个小细节，可能就帮到了正在用键盘浏览页面的用户。
