按钮点击样式不生效主因是:active伪类未触发，因元素不可激活或缺失tabindex/role；:active仅瞬时生效，持续状态需JS切换类名；框架优先级、移动端延迟、事件目标错位亦为常见原因。
按钮点击样式不生效的常见原因
绝大多数情况下，不是 CSS 写错了，而是 :active 伪类根本没被触发——因为用户点的是「非可激活元素」，或者用了 div / span 模拟按钮但没加 tabindex 和 role="button"，导致浏览器不认为它是可交互控件。
检查是否误用 :active 替代点击反馈逻辑
:active 只在鼠标按下、触摸开始到释放前那一瞬间生效，松开就消失。它不能替代「点击后状态保持」（比如选中态、开关切换）。如果你想要点击后样式持续，得用 JS 切换类名，比如 is-active 或 is-pressed。
- ✅ 正确用途：
button:active { transform: scale(0.98); }（瞬时压感） - ❌ 错误期待：
div.btn:active { background: blue; }想让点完还蓝着——不会 - ⚠️ 注意：移动端 touchstart 触发
:active有约 300ms 延迟，部分浏览器甚至不触发，需配合touch-action: manipulation
框架中类名冲突或优先级覆盖
像 Bootstrap、Tailwind 这类框架，按钮默认样式可能带 !important，或用高权重选择器（如 .btn.btn-primary:active），你自定义的 button:active 很容易被干掉。
