:focus 在元素获得焦点时生效，与鼠标动作无关；:active 在鼠标/触控按下瞬间触发且瞬态存在；二者触发条件正交、生命周期不同，常共存于表单交互。
:focus 只在获得焦点时触发，不依赖鼠标动作
用户用 Tab 键切换、点击输入框、或调用 element.focus() 时，:focus 就会生效。它和鼠标是否按下完全无关——哪怕鼠标悬停但没点，只要元素有焦点，样式就显示。常见于表单校验提示、键盘导航高亮等场景。
注意：:focus 在移动端可能行为受限（比如 iOS Safari 默认不给非可交互元素加 focus 样式），需配合 tabindex="0" 或确保元素原生可聚焦（如 、）。
-
input:focus通常用于加边框阴影或背景微调，提示“当前正在编辑” - 若同时定义了
:hover和:focus，鼠标悬停后点击会先触发:hover，再叠加:focus；松开鼠标后:hover消失，:focus仍保留 - 避免仅靠颜色变化实现
:focus样式，需满足 WCAG 对比度和视觉辨识要求
:active 在鼠标/触控按下瞬间触发，松开即消失
典型用途是按钮按下的视觉反馈，比如缩放、变色、位移。但它无法用于键盘操作（Tab 进入不会触发 立即学习“前端免费学习笔记（深入）”； 比如一个搜索框： CSS :active 是瞬态伪类：从鼠标左键按下去那一刻开始，到松开为止，样式才生效。它不关心焦点，也不等待元素是否可交互——哪怕一个 :active，点击它也会触发（尽管没实际交互逻辑）。
:active）。
button:active 常配合 transform: scale(0.98) 或 background-color 暗化，模拟“被按下”感:active 持续时间极短（约 100–300ms），且默认可能被禁用，需在 中加 并确保无 -webkit-tap-highlight-color: transparent 干扰:active 替代 :focus 来做可访问性焦点指示——它不持久，屏幕阅读器用户无法感知表单中两者常共存，但作用域和生命周期完全不同
input[type="search"] 获得焦点时显示蓝色描边（:focus），而用户点击右侧清空按钮时，按钮短暂下陷（:active）。它们互不干扰，因为触发条件正交：一个是“谁在编辑”，一个是“谁正被按着”。
:active 应写在 :focus 后面，否则聚焦状态下点击可能看不到按下效果（层叠优先级相同，后声明者胜出）:focus-visible 是更现代的替代方案，能区分键盘 focus 和鼠标 click，避免鼠标用户看到多余焦点环；但兼容性需查 Can I Useref.current.focus() 不会触发 :active，因为没真实鼠标事件，这点容易误以为样式失效别混淆 :active 和 JavaScript 的 mousedown / click 事件
:active 是纯样式响应，不产生事件、不阻塞主线程、也不可编程控制持续时间。而 JS 的 mousedown 可以做防抖、取消默认行为、甚至阻止 :active 触发（比如 e.preventDefault() 在某些浏览器下会影响）。
真正难的是让两者在不同输入方式下都自然：键盘用户不想要突兀的 :active，触摸用户又讨厌延迟的 :focus 反馈。细节都在事件流和平台默认行为里，而不是一行 CSS 能解决的。:active 无法做到contenteditable 元素或自定义组件上，:focus 行为可能不稳定，建议用 document.activeElement + 类名切换来兜底:focus，用真机触摸验证 :active 是否及时响应
