:active 是点击瞬间触发的瞬时伪类，仅在鼠标按下到松开期间生效，不保留状态、无法键盘触发、不适用于非交互元素；:focus 是持续焦点状态，需显式获取且可持久存在。
点击瞬间触发的是 :active，不是 :focus
:active 只在鼠标按下（或触摸开始）到松开的极短时间内生效，和是否获得焦点无关。它不保留状态，松手即失效。常见于按钮按压反馈，比如让按钮背景变深一点。
容易误以为点击后还“保持 active”——其实不会。如果想维持类似效果，得用 JS 切换 class，或者改用 :focus 配合 tabindex。
-
:active无法通过键盘触发（除非是带tabindex的元素且用户用空格/回车激活） - 移动端上，
:active在 touchstart 后立即触发，但部分 Android 浏览器有 300ms 延迟，需加touch-action: manipulation优化 - 不能用在
<div>等非交互元素上实现“长按高亮”，因为默认不响应点击事件
:focus 是键盘导航或显式聚焦后的持续状态
:focus 表示元素当前拥有输入焦点，通常由 Tab 键、click()、focus() 方法或表单控件自动获得。它会一直存在，直到焦点离开（比如点别的地方或按 Shift+Tab）。
注意：普通 <div> 默认不可聚焦，要加 tabindex="0" 才能被键盘访问并响应 :focus。
立即学习“前端免费学习笔记（深入）”；
- 表单元素（
<input>、<button>、<select>）天然支持:focus -
:focus样式常用于可访问性设计，比如显示清晰的焦点轮廓（别直接outline: none除非提供替代样式） - Chrome/Firefox 默认只对键盘触发的聚焦应用
:focus样式（:focus-visible更精准，但兼容性稍弱）
同时设置 :active 和 :focus 时要注意层叠顺序
CSS 伪类没有优先级差异，生效取决于规则书写顺序。如果两个规则选择器权重相同，后写的会覆盖先写的。
典型错误是把 :focus 写在 :active 前面，结果点击时看不到按压效果——因为松手后焦点还在，:focus 样式盖住了 :active 的临时变化。
button:active {
background-color: #2c3e50;
}
button:focus {
outline: 2px solid #3498db;
}
上面写法没问题；但如果写成：
button:focus {
outline: 2px solid #3498db;
}
button:active {
background-color: #2c3e50;
}
那点击时背景色会生效，但松手后焦点轮廓保留，视觉上可能掩盖了你为 :active 设计的反馈意图。
移动端真机测试时 :active 经常不生效
很多 iOS/Android 浏览器默认禁用非可点击元素的 :active，尤其当元素没声明 cursor: pointer 或没绑定 click 事件时。
- 给元素加
cursor: pointer能提高 iOS Safari 触发:active的概率 - 更可靠的方式是监听
touchstart和touchend，动态添加/移除 class - 避免依赖
:active实现核心交互反馈，比如“按钮已按下”的状态确认——应该用 JS 控制
复杂点在于：:active 是瞬时、被动、不可编程的；:focus 是持久、可预测、可主动控制的。别指望靠一个伪类解决所有交互反馈需求。
