:focus伪类用于控制可聚焦元素获键盘焦点时的样式，需确保元素默认可聚焦或通过tabindex属性设置，应避免禁用outline而无替代视觉反馈，推荐使用:focus-visible提升交互准确性。
用 :focus 伪类可以精准控制元素获得键盘焦点时的样式，比如点击输入框、按 Tab 键切换到按钮等场景。关键在于：只有可聚焦元素（如 、、带 tabindex 的元素）才能触发 :focus；默认浏览器会加 outline，通常需手动覆盖或优化。
确保元素本身能获取焦点
不是所有元素默认可聚焦。常见可聚焦元素包括：input、textarea、button、select、a（含 href 时）。其他元素（如 div、span）需显式添加 tabindex 属性：
-
tabindex="0"：纳入自然 Tab 顺序，可聚焦也可键盘操作 -
tabindex="-1"：不能通过 Tab 进入，但可通过 JavaScript 调用.focus()获取焦点 - 避免使用
tabindex > 0，会打乱页面逻辑顺序，影响可访问性
基础:focus样式写法与注意事项
直接在选择器后加 :focus 即可定义聚焦态样式。常用组合写法：
input:focus { border-color: #007bff; box-shadow: 0 0 0 2px rgba(0,123,255,.25); }-
button:focus { outline: none; background-color: #0069d9; }（慎用outline: none，务必提供替代视觉反馈） - 推荐保留或美化 outline，例如：
outline: 2px solid #007bff; outline-offset: 2px;
配合:focus-visible提升体验
只在键盘操作触发焦点时显示高亮（避免鼠标点击后也出现），可用 :focus-visible —— 更符合用户实际交互意图：
立即学习“前端免费学习笔记（深入）”；
button:focus-visible { outline: 2px solid #007bff; }input:focus-visible { box-shadow: 0 0 0 3px rgba(0,123,255,.25); }- 注意兼容性：现代 Chrome/Firefox/Edge 支持良好，Safari 需较新版本；可搭配
@supports安全降级
避免可访问性陷阱
移除默认 outline 时，必须提供清晰、足够对比度的替代焦点指示，否则对键盘用户极不友好：
- 禁用
outline: none后，至少用border、box-shadow或背景色变化明确标出当前焦点位置 - 确保焦点样式在深色/浅色模式下都可见（测试对比度 ≥ 4.5:1）
- 不要仅靠颜色区分状态，可叠加图标、粗边框或尺寸变化增强识别性
