按钮点击无反应通常因:active伪类瞬时性、样式被覆盖或移动端兼容问题；需用JavaScript切换.is-active类实现持久状态，并同步更新aria-pressed以保障可访问性。
按钮激活状态用 :active 伪类时点击没反应？
多数情况不是样式没写，而是被其他样式覆盖或触发条件不满足。:active 只在鼠标按下（或触摸开始）到松开前那一瞬间生效，松手即失效。如果按钮绑了 click 事件但没阻止默认行为，可能页面跳转或刷新导致来不及看到效果。
- 确保父容器没设置
pointer-events: none或遮挡层 - 检查是否被更具体的 CSS 规则（如
.btn:activevsbutton:active）覆盖，用浏览器开发者工具的“Computed”面板确认实际生效样式 - 移动端需注意：部分 iOS Safari 对
:active支持受限，建议加touchstart事件临时添加 class 模拟 - 避免仅依赖
:active做状态反馈——它无法持久，真正需要“已点击”状态请改用.is-active这类 JS 控制的 class
想让按钮点击后保持高亮？别只靠 :active
:active 是瞬态伪类，没法维持。要实现“点击后保持激活样式”，必须配合 JavaScript 切换 class。
- 给按钮绑定
click事件，用classList.toggle('is-active')控制状态 - CSS 中定义
.btn.is-active样式，优先级要高于普通状态（比如加!important不推荐，改用更具体选择器） - 如果按钮是表单提交按钮，记得在 handler 里调用
e.preventDefault()防止页面刷新干扰状态 - 多个按钮互斥激活时，先清除所有
.is-active，再给当前添加——别漏掉这步，否则状态会堆叠
使用 aria-pressed 实现可访问性激活状态
屏幕阅读器用户依赖 aria-pressed 理解按钮是否处于“按下”状态。纯视觉样式对无障碍无效。
- 按钮是切换型（如开关、工具栏按钮），应设
role="button"并动态更新aria-pressed="true/false" - CSS 可配合属性选择器写：
[aria-pressed="true"] { background: #007bff; } - 不要只写
aria-pressed却不改视觉样式——两者必须同步，否则造成认知冲突 - React/Vue 等框架中，确保状态更新后 DOM 属性真实反映，避免虚拟 DOM 与真实 DOM 不一致
按钮激活样式在不同设备上表现不一致？
桌面端靠鼠标按下触发 :active，移动端靠触摸，而某些 Android 浏览器甚至需要 -webkit-tap-highlight-color: transparent 才能正常响应。
立即学习“前端免费学习笔记（深入）”；
- 统一做法：用
touchstart+mousedown双事件监听，然后添加临时 class，松开时移除（用touchend/mouseup） - 避免直接改
background-color动画——低端设备容易卡顿，改用transform: scale(0.98)更轻量 - 真机测试必做：iOS Safari 的
:active默认延迟 300ms，加meta viewport的user-scalable=no无用，必须用上述 JS 方案绕过 - 禁用默认高亮：全局加
* { -webkit-tap-highlight-color: transparent; }，但要测试是否影响其他交互
真实项目里最容易忽略的是：把“视觉按下”和“逻辑激活”混为一谈。一个按钮点了没反应，但样式变了，用户会以为操作成功；反过来，状态变了但样式没变，用户又会反复点击。这两件事得分开设计、同步维护。
