该用 :active 而不是 :focus 时，是指需要表现用户主动按下元素（鼠标/触屏/空格回车）的瞬态反馈，如按钮按下的凹陷感；:focus 则用于持续表示键盘可交互状态。
什么时候该用 :active 而不是 :focus
:active 只在元素被用户**主动按下（鼠标左键按住、触屏触摸并保持、空格/回车触发按钮时的瞬态）** 的那一小段时间内生效，松开就立刻结束；:focus 则表示元素当前处于键盘可交互状态（比如按 TAB 切入、点击后获得焦点、JS 调用 focus()），只要没被其他操作移走焦点，样式就持续存在。
常见误用：给按钮加 :active 模拟“已点击”状态——这是错的，它无法持久；想让按钮点击后保持高亮，得靠 JS 切换 class 或用 :focus 配合 tabindex，但要注意可访问性影响。
- 按钮点击反馈（按下的凹陷感）→ 用
:active - 表单输入框被选中等待输入 → 用
:focus - 导航菜单项键盘操作时的指示 → 用
:focus（推荐同时加:focus-visible避免鼠标用户看到多余轮廓） - 自定义组件需要“激活态”语义（如开关、标签页选中）→ 不该依赖
:active，应使用.is-active类或[aria-pressed="true"]
:focus 在非表单元素上为什么默认不生效
HTML 中只有少数元素原生支持焦点，比如 <a href>、<button>、<input>、<textarea>、<select>。像 <div>、<span>、<li> 这类元素默认 tabindex="-1"（不可聚焦），所以加了 :focus 也没反应。
要让它响应 :focus，必须显式设置 tabindex 属性：
立即学习“前端免费学习笔记（深入）”；
<div tabindex="0">可聚焦的容器</div> <span tabindex="-1">仅 JS 可 focus() 的元素</span>
tabindex="0" 表示按 TAB 可自然进入；tabindex="-1" 表示不能通过 TAB 进入，但可通过 JS .focus() 聚焦——这对模态框关闭按钮、下拉菜单项等场景很实用。
注意：加了 tabindex 后，:focus 样式才可能生效，但也意味着该元素进入了键盘导航流，需同步处理 Enter/Space 事件逻辑，否则会损害可访问性。
:active 的兼容性与移动端陷阱
桌面端 :active 在鼠标按下时触发稳定；但在 iOS Safari 和部分安卓 WebView 中，:active 默认延迟约 300ms 才触发（为双击缩放留判断时间），导致点击无反馈。这不是 bug，是历史遗留行为。
-
解决方法一：给
<body>加touch-action: manipulation，能消除延迟并启用:active - 解决方法二：用
ontouchstart+ class 切换（更可控，但需 JS） - 避免写
div:active { opacity: 0.7; }却不加cursor: pointer——这会让用户困惑“这东西到底能不能点？” -
:active不会冒泡，也不能用 JS 监听，纯 CSS 状态，别指望它和 JS 状态同步
另外，:active 在键盘触发（如空格键激活按钮）时也生效，但只限于原生可交互元素；自定义 div[role="button"] 必须手动监听 keydown 并加 class，:active 对它无效。
组合使用 :focus 和 :active 的真实场景
一个常见需求：按钮在鼠标悬停时变色，点击时压下，且键盘聚焦时有清晰轮廓——三者不冲突，但顺序和覆盖逻辑很重要。
CSS 优先级通常按声明顺序覆盖，建议这样组织：
button {
background: #eee;
}
button:hover {
background: #ddd;
}
button:focus {
outline: 2px solid #007bff;
}
button:active {
background: #ccc;
}
button:focus:active {
background: #bbb; /* 鼠标点击聚焦态按钮时的更深压感 */
}关键点：
-
:focus:active是合法伪类组合，表示“既获得焦点又被按下”的瞬间 - 不要用
:focus完全覆盖:active的视觉变化，否则键盘用户点击时会丢失按下反馈 - 如果禁用了
outline（如outline: none），务必提供替代焦点指示（比如边框、阴影、背景色变化），否则 WCAG 2.4.7 失效 - 移动端 Safari 对
:focus的触发较保守（常需点击 input 才触发），别依赖它做核心交互反馈
最易被忽略的是：很多人以为加了 :focus 就自动可访问，其实还得确保元素可键盘到达（tabindex）、可键盘操作（Enter/Space 响应）、焦点可见（不隐藏 outline 且有对比度）——缺一不可。
