:active样式不生效的主因是被:focus/:hover覆盖、移动端禁用或触发时机过短；需调整CSS顺序、添加-webkit-tap-highlight-color、用JS切换class实现可靠点击反馈。
按钮点击瞬间样式不生效？先确认是否被:focus或:hover覆盖
很多情况下写好了 :active，但点击时完全看不到效果，不是语法错，而是浏览器默认行为或层叠顺序干扰。:active 的优先级和触发时机很“脆”——它只在鼠标按下、触摸开始、键盘空格/回车触发的那几十毫秒内生效，且容易被更具体的 :focus 或 :hover 规则压掉。
- 检查 CSS 顺序：把
:active放在:hover和:focus之后，否则可能被覆盖 - 避免用
!important混乱调试，先用浏览器开发者工具看 computed styles 里哪条规则赢了 - 移动端要注意：iOS Safari 对
:active默认禁用（为提升滚动性能），需加body { -webkit-tap-highlight-color: transparent; }并确保元素有cursor: pointer或绑定空ontouchstart
:active 不能替代点击反馈逻辑？对，它只是视觉瞬态
:active 只控制「按下未松开」那一帧的样式，松手就立刻回退。它无法记录状态、无法配合 JS 判断是否已点击、也不能延时或动画过渡（CSS transition 在 :active 中支持有限，尤其 Safari 对 transform + :active 过渡常失效）。
- 需要「按下去保持高亮」？用 JS 切换 class，比如
btn.is-pressed，再配 CSS - 要兼容键盘操作（空格/回车触发按钮）？
:active本身支持，但得确保按钮是<button></button>或有role="button"+tabindex="0" - 想加点击缩放效果？用
transform: scale(0.95)比改 background 更可靠，但别同时设transition: all，只过渡 transform
哪些元素能用 :active？别在 div 上硬套
:active 在规范中本就只对「可激活元素」有效，早期浏览器甚至只认 <a></a> 和 <button></button>。现在虽扩展到多数带 onclick 或 role 的元素，但行为不一致。
- 安全选择只有：
<button></button>、<a href></a>、<input type="button|submit|reset"> - 自定义
<div onclick> 虽然能触发 :active，但在 Firefox 中需加 <code>tabindex="0"才响应键盘；Safari 可能完全忽略 - 禁用状态下的按钮：
button:disabled:active不会匹配，想给禁用态也加点击反馈？只能靠 JS 监听 mousedown + 检查 disabled 属性 - 加
<meta name="viewport" content="width=device-width, initial-scale=1">是基础，但不够 - 更彻底方案：用
touchstart+touchend手动 toggle class，绕过 :active 机制 - 注意「点击穿透」：如果弹层上按钮用了 :active，关闭弹层后底层按钮可能被误触，因为 touchend 发生在新 DOM 上，但 click 事件仍冒泡到底层 —— 这时得用
pointer-events: none临时锁底
移动端真机测试必做：:active 的延迟与穿透问题
安卓 Chrome 和 iOS Safari 都存在 300ms 点击延迟（为双击缩放留时间），这直接导致 :active 样式出现滞后、闪一下就消失，甚至用户松手后才触发。这不是 bug，是历史兼容策略。
立即学习“前端免费学习笔记（深入）”；
:active 很轻量，但边界条件多。最常被忽略的是：它根本不是“点击效果”的完整解，只是 UI 响应链里最前端的一小段瞬态信号。
