:active 无反应因元素无交互语义，需用或加tabindex="0"；样式被覆盖时应调整声明顺序或提高特异性；移动端反馈不可靠，建议js控制class实现稳定状态。
为什么 :active 点击时没反应？
浏览器默认只对可交互元素（如 <a></a>、<button></button>）触发 :active，普通 <div> 或 <code><span></span> 即使加了 cursor: pointer 也不会激活该伪类。
- 确保目标元素有明确的交互语义：优先用
<button></button>，避免用<div onclick="..."></div> - 若必须用非表单元素，需手动添加
tabindex="0"并监听键盘Enter/Space事件 - 移动端 Safari 有 300ms 延迟，
:active可能一闪而过——加touchstart事件临时加 class 更可靠
:active 样式被其他规则覆盖怎么办？
:active 的权重和普通类选择器一样，不特殊。常见冲突来自：
后续定义的
:hover或.clicked类覆盖了:active样式-
使用了
!important的全局重置样式（如某些 UI 框架的 base.css）立即学习“前端免费学习笔记（深入）”；
把
:active放在:hover之后声明，或提高选择器特异性，比如写成button:active而非单纯:active避免在组件级 CSS 中无差别用
!important，它会直接废掉:active的可控性检查 DevTools 的 Styles 面板，看
:active规则是否被划掉（strikethrough），被划掉就说明被覆盖
移动端点击反馈发虚、延迟或消失太快
iOS Safari 和部分安卓 WebView 对 :active 的触发时机和持续时间控制很松散，尤其在快速点击或页面滚动后。
- 不要依赖
:active做“按下即生效”的状态切换（比如切换图标、改变背景色并保持），它只在手指按住瞬间存在 - 真正需要视觉反馈延续的场景（如按钮按下后变灰直到请求完成），改用 JS 控制 class：监听
touchstart添加is-pressed，touchend/touchcancel移除 - 如果只是微调反馈，可加过渡：
button:active { transform: scale(0.98); transition: transform 0.05s; }但注意不要设太长的transition，否则松手后还动，反而失真
和 JavaScript 状态混用时容易错乱
比如按钮点击后 JS 设置 disabled=true，但 :active 在禁用前最后一帧仍可能触发，造成样式抖动。
-
button:disabled:active是无效组合，浏览器忽略 —— 所以一旦设disabled，:active就彻底失效 - 如果按钮逻辑是“点下 → 发请求 → 禁用 → 完成 → 启用”，那么
:active只作用于启用态下的那一小段按压过程 - 更稳妥的做法：统一用 class 控制反馈，比如
btn--pressed，JS 在mousedown/touchstart时添加，mouseup/touchend时移除，不依赖伪类生命周期
真实项目里，:active 最适合做轻量、瞬时、无需 JS 协同的物理反馈；一旦涉及状态持久、跨设备一致、或与异步流程耦合，就得让 JS 接管视觉状态的开关时机。
