:focus状态颜色应选高对比但柔和的蓝色系（如#4a6fa5），显式声明outline-style: solid并配合outline-offset: 2px，深色模式下需单独适配，避免纯黑背景与亮蓝冲突，确保WCAG对比度≥4.5:1。
focus 状态颜色怎么选才不刺眼又够明显
键盘用户靠焦点轮廓定位，颜色太浅看不见，太艳又干扰视觉。核心是控制对比度和避免“突兀跳色”。
- 用
outline-color时别只调色值——必须显式写outline-style: solid，否则 Safari 可能默认不渲染 - 深色背景上慎用
#007bff这类亮蓝，WCAG 对比度可能低于 4.5:1；换成#4a6fa5或加outline-offset: 2px提升可识别性 - 别直接
outline: none，除非你同步提供替代反馈：比如box-shadow: 0 0 0 2px #0066cc+border-color: #0066cc - 测试真机 Tab 导航：Chrome 和 Firefox 默认对鼠标点击也触发
:focus，容易误显；改用:focus-visible更准，但得配:focus回退
active 状态颜色为什么不能只变深 10%
:active 是瞬时反馈，不是状态保持，颜色变化必须“足够快、足够重”，否则用户感知不到按下动作。
- 背景色建议比常态深 25%～35%，比如常态
#007bff→ active 用#0056b3（不是简单darken()10%） - 别依赖纯色差：加
transform: translateY(1px)或微调box-shadow深度，强化“按下去”的物理感 - 移动端要注意
:active触发延迟：Android Chrome 旧版有 300ms 延迟，加touch-action: manipulation到按钮上可缓解 - 如果按钮带
transition，:active里要设transition: none，否则松手时颜色会“弹回去”，失去即时感
focus 和 active 同时存在时谁优先级更高
伪类本身无优先级，CSS 层叠规则起作用——后写的同权重规则会覆盖前面的。实际中常因顺序错导致按压效果被焦点样式盖掉。
- 把
:active放在:focus后面写，否则点击时看到的是:focus色，不是按压色 - 不要混用
:focus和:focus-visible在同一选择器链里，浏览器解析行为不一致，Safari 15.4+ 才稳定支持:focus-visible - 如果用了
outline: none+border实现焦点，:active里记得同步改border-color，否则边框颜色不变，视觉割裂
深色模式下 focus 颜色怎么适配
硬写死 #007bff 在深灰背景上几乎不可见，必须响应式处理或用系统色值。
立即学习“前端免费学习笔记（深入）”；
- 用
@media (prefers-color-scheme: dark)单独定义outline-color，比如outline-color: #6a98ff - 更稳妥的做法是用 CSS 自定义属性：
--focus-color: var(--color-primary, #007bff)，再配合 JS 检测window.matchMedia('(prefers-color-scheme: dark)')动态切换 - 避免用
hsl()直接调亮度——深色模式下饱和度感知不同，实测发现hsl(210, 100%, 60%)在暗色背景上比hsl(210, 100%, 40%)更易辨识
:focus-visible 兼容性兜底和 outline-offset 微调上，这两处细节漏掉，无障碍测试就过不了。 
