:focus 在元素获得焦点时生效，与鼠标动作无关；:active 在鼠标/触控按下瞬间触发且瞬态存在；二者触发条件正交、生命周期不同，常共存于表单交互。
:focus 只在获得焦点时触发，不依赖鼠标动作
用户用 Tab 键切换、点击输入框、或调用 element.focus() 时，:focus 就会生效。它和鼠标是否按下完全无关——哪怕鼠标悬停但没点，只要元素有焦点，样式就显示。常见于表单校验提示、键盘导航高亮等场景。
注意：:focus 在移动端可能行为受限（比如 iOS Safari 默认不给非可交互元素加 focus 样式），需配合 tabindex="0" 或确保元素原生可聚焦（如 、）。
-
input:focus通常用于加边框阴影或背景微调，提示“当前正在编辑” - 若同时定义了
:hover和:focus，鼠标悬停后点击会先触发:hover，再叠加:focus；松开鼠标后:hover消失，:focus仍保留 - 避免仅靠颜色变化实现
:focus样式，需满足 WCAG 对比度和视觉辨识要求
:active 在鼠标/触控按下瞬间触发，松开即消失
:active 是瞬态伪类：从鼠标左键按下去那一刻开始，到松开为止，样式才生效。它不关心焦点，也不等待元素是否可交互——哪怕一个
加了
:active，点击它也会触发（尽管没实际交互逻辑）。
典型用途是按钮按下的视觉反馈，比如缩放、变色、位移。但它无法用于键盘操作（Tab 进入不会触发 :active）。
立即学习“前端免费学习笔记（深入）”；
