:active 点击无反应主因是样式被覆盖、触发条件不足或视觉变化不明显；需检查选择器权重、pointer-events、touch-action，强化背景色/缩放等对比效果，并添加合理transition。
button 点击没反应？先确认 :active 是否被覆盖或失效
很多情况下不是 :active 不工作，而是它被其他样式压住了，或者触发条件不满足。浏览器默认只在「鼠标按下且未松开」的瞬间应用 :active，持续时间极短（毫秒级），肉眼容易忽略。另外，移动端需要额外处理 —— iOS Safari 默认禁用非可点击元素的 :active，button 虽然天生可点击，但若加了 cursor: pointer 或 user-select: none 等干扰属性，也可能抑制激活态。
- 检查是否写了
button:active { ... }，但被后面更具体的规则（比如button:focus:active或类名选择器）覆盖 - 确保没设置
pointer-events: none或父级有overflow: hidden切掉了反馈区域 - 移动端必须保证元素有「可激活行为」：建议显式加
touch-action: manipulation
为什么加了 :active 样式还是看不见？
常见原因是样式变更太轻微，或者和默认态几乎一样。比如只改了 color，但按钮文字颜色本身就很浅；或者用了 transform: scale(0.98)，缩放差异小到难以察觉。更隐蔽的是：某些 CSS 属性在 :active 下不触发重绘（如 opacity 变化若没开启硬件加速，可能卡顿或跳过）。
- 优先用视觉对比强的变化：
background-color、box-shadow、transform: scale()（配合transition） - 避免仅依赖
color或border-color，尤其在深色/浅色背景切换时易失效 - 务必加
transition，否则变化是瞬时的，人眼根本捕获不到 —— 例如：transition: background-color 0.1s, transform 0.05s;
:active 在不同设备上的行为差异
桌面端靠鼠标按键状态触发，移动端靠触摸开始（touchstart）到结束（touchend）之间的窗口期。iOS Safari 对非表单控件的 :active 支持较弱，Android Chrome 相对稳定。如果按钮是用 div + role="button" 模拟的，:active 默认不生效，必须加 tabindex="0" 才能获得焦点和激活能力。
- 真
button元素最稳妥，无需额外属性 - 若用
span或div，至少加tabindex="0"和role="button" - 移动端建议补一层 JS 监听：
ontouchstart添加临时 class，避免依赖 CSS 伪类的不确定性
button {
background-color: #007bff;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
transition: background-color 0.12s, transform 0.06s;
touch-action: manipulation;
}
button:active {
background-color: #0056b3;
transform: scale(0.96);
}
实际效果取决于你是否让这个变化「足够明显、足够及时、足够稳定」。最容易被忽略的是过渡时间 —— 太长像卡顿，太短像没动，0.05–0.12 秒之间最接近真实按键反馈。 
