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