按钮点击样式不生效主因是: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 很容易被干掉。
- 用浏览器开发者工具检查「Computed」面板，看
:active样式是否被划掉 - 提高优先级：改用
.my-btn:active并确保它在框架 CSS 之后加载 - Tailwind 用户注意：
active:变体默认关闭，需在tailwind.config.js的variants中显式启用：['active']
事件绑定没绑对目标元素
如果用 JS 绑了 click 事件，但实际响应的是子元素（比如图标 i 或文字 span），而你的 :active 写在父容器上，那按下子元素时，父元素未必进入 :active 状态。
立即学习“前端免费学习笔记（深入）”；
- 验证方式：在开发者工具里选中按钮，按住鼠标，看哪个元素亮起
:active状态 - 稳妥做法：把
:active写在最外层可点击容器上，并确保它有cursor: pointer和user-select: none - 更可靠的方式是监听
mousedown/touchstart，手动加类，再在mouseup/touchend移除——绕过伪类限制
CSS 框架里按钮点击样式失效，真正卡住人的往往不是语法，而是混淆了「视觉反馈时机」和「状态管理职责」。伪类管瞬时，JS 管状态，两者混用又不加调试，问题就藏得特别深。