:focus 在元素获得键盘焦点时生效，:active 仅在鼠标/触控按下到松开的瞬间触发；二者触发时机不同、可共存，且需结合 JS 和 :focus-visible 等方案应对多端兼容性问题。
:focus 和 :active 的触发时机完全不同
很多人以为
和
是“按下去就同时生效”的，其实不是：
表示元素获得键盘焦点（比如 Tab 切入、
被点击或调用
），而
仅在鼠标/触控按下（
/
）到松开（
/
）的瞬间生效，持续时间极短，且不依赖焦点状态。
这意味着：
在点击时亮一下，哪怕它没
或没被聚焦过
在键盘导航抵达时保持高亮，但点击时不一定触发
（比如鼠标点太快、系统延迟、或被
干扰）
两者可以共存：例如用键盘 Tab 到按钮后，再用鼠标点击——此时同时匹配
如何让按钮点击时既有 :active 反馈又保持 :focus 高亮
默认情况下，点击按钮会触发
，但松开后焦点可能丢失（尤其在 `
` 上点击后，Chrome/Firefox 默认保留焦点，Safari 有时不会；而 `` 点击后几乎从不自动获得焦点）。要稳定维持“按下去有压感、松开后仍可继续用键盘操作”，得主动干预。实操建议：立即学习“前端免费学习笔记（深入）”；确保可交互元素是原生可聚焦标签（、、带的）用替代裸，避免鼠标点击后意外出现焦点环（现代浏览器支持，旧版可用focus-visible polyfill）组合写法更可控：若需“点击后强制保焦”，可在事件中手动调用，但注意避免干扰屏幕阅读器的自然流移动端 touch 设备上的 :active 失效问题iOS Safari 和部分安卓WebView 中，样式默认不生效——因为这些浏览器为提升滚动性能，延迟或禁用了对非可点击元素的响应。这不是 bug，而是优化策略。Comet AI 浏览器下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。下载解决方式有限但明确：给元素添加（仅 CSS 层面提示，无实际作用）不行必须加属性（空事件处理器）或绑定任意监听器，才能激活的响应能力更稳妥的做法是改用 JavaScript 模拟：，然后在 JS 中切换临时 class（如）来驱动样式注意：添加后，会在触发时立即生效，而非等到，行为与桌面端略有差异:focus-within 作为 :focus/:active 的补充方案当目标不是单个按钮，而是整个卡片、表单项区域需要“任一子元素聚焦或激活时整体响应”，就比堆砌多个和更简洁可靠。典型场景：一个包含和，希望输入框获得焦点或按钮被点击时，整个卡片加边框写法：会响应子元素的，也响应子元素的（只要该子元素本身支持）兼容性：Chrome 60+、Firefox 61+、Safari 15.4+，IE 完全不支持；如需兼容老版本，仍需 JS 监听 + class 切换真正难处理的不是语法，而是不同输入方式（键盘、鼠标、触摸、辅助技术）下焦点流和激活态的交错逻辑。别指望纯 CSS 覆盖所有路径，关键交互点该加 JS 控制时就加，别硬套伪类。
:focus:active:focusinput.focus():activemousedowntouchstartmouseuptouchendbutton:activetabindexbutton:focus:activepreventDefault:focus:active:activebuttonatabindex="0"div:focus-visible:focusbutton:focus:not(:active) {
outline: 2px solid #007bff;
}
button:active {
transform: scale(0.98);
background-color: #0056b3;
}click.focus():active:activecursor: pointerontouchstart=""touchstart:activeis-pressingontouchstart:activetouchstarttouchend:focus-within:focus:activediv.cardinputbutton.card:focus-within {
border: 2px solid #007bff;
}
.card:focus-within button:active {
transform: translateY(1px);
}:focus-within:focus:active:active