:active 无反应的根本原因是它仅在鼠标/触控按下未松开的极短窗口期生效，非状态记录而是动作响应；需满足元素可交互、伪类顺序正确、样式显式声明三条件。
按钮按下时状态不触发：:active 为什么没反应
根本原因是 :active 只在鼠标（或触控）真正按下且未松开的**极短窗口期**生效，一旦事件结束（mouseup/touchend），样式立即回退。它不是“记录按下状态”，而是“响应按下动作”。常见错误是误以为它能替代 JavaScript 的状态管理。
- 移动端 touchstart 后若页面滚动或触发了默认行为（如 a 标签跳转），
:active会提前中断 - 父元素设置了
pointer-events: none或opacity: 0，子元素的:active将完全失效 - 用
display: none切换按钮可见性后，再显示时首次点击可能不触发:active（浏览器渲染时机问题）
:active 样式写法必须满足的三个硬条件
缺一不可，否则白写：
- 目标元素必须是可交互的——推荐用
<button></button>，不用<div> 或 <code><span></span>（后者需手动加tabindex="0"和role="button"才能被 focus 和触发:active） -
:active规则必须放在:hover之后（CSS 伪类顺序：:link → :visited → :hover → :active），否则会被覆盖 - 不能依赖继承或简写属性覆盖——比如父级设了
color: red，子级button:active { color: blue }必须显式声明，不能靠 inherit 或 unset
需要保持“按下态”更久？别硬扛 :active
如果需求是“按下去就变色，松开也不恢复，直到其他操作重置”，:active 天然做不到。这时候必须交由 JS 控制 class：
button.addEventListener('mousedown', () => {
btn.classList.add('is-pressed');
});
button.addEventListener('mouseup', () => {
btn.classList.remove('is-pressed');
});
对应 CSS 写 .is-pressed { background: #4a90e2; }。注意：只监听 mousedown/mouseup 不够健壮，还需补充 mouseleave 防止鼠标划出后仍卡在按下态；移动端则要同时处理 touchstart/touchend/touchcancel。
立即学习“前端免费学习笔记（深入）”；
兼容性与性能提醒：别在 :active 里做重事
:active 是纯样式层机制，但某些操作会拖慢响应或引发意外：
- 避免在
:active中使用box-shadow模糊值过大（如0 0 20px rgba(0,0,0,0.3)），老机型可能出现明显延迟 - IE11 及更早版本不支持对非表单元素（如
<div>）应用 <code>:active，哪怕加了tabindex - Firefox 在快速连点时偶尔会漏掉
:active样式切换，属于已知渲染竞态，无完美解，只能降低预期
真正难的不是写对 :active，而是判断此刻该不该用它——多数所谓“按下效果”其实本质是状态反馈，而不是瞬态响应。
