:active不生效主因是移动端300ms延迟、元素不可聚焦或样式被覆盖；应加touch-action: manipulation、tabindex，将:active置于:hover后，用transform替代颜色变化，并兼顾键盘操作。
点击时没反应？检查 :active 是否被触摸事件干扰
移动端或混合环境里，:active 经常“点不动”，不是写法错，而是浏览器默认延迟或禁用了激活态。iOS Safari 和部分安卓 WebView 会在触摸开始后等待约 300ms 判断是否为双击，期间不触发 :active；另外，如果元素没有 cursor: pointer 或未绑定任何交互（比如没加 onclick、没设 tabindex），某些浏览器会直接跳过 :active 样式计算。
实操建议：
- 给目标元素加
touch-action: manipulation，告诉浏览器“这是点击操作，别等双击” - 确保元素可聚焦：加
tabindex="0"或本身是<button></button>、<a></a>等原生可交互标签 - 避免只靠
:active做关键反馈——它持续时间极短（毫秒级），且无法在 touchend 后保持，需配合 JS 手动加 class 做更稳的按下态
:active 样式不生效？优先排查选择器权重和层级
:active 是伪类，它的样式容易被后续声明、更高权重的选择器覆盖。尤其当用 .btn:hover:active 这类组合时，一旦 :hover 的规则里定义了颜色或背景，:active 就可能被压制。
常见错误现象：background-color 按下时不变化，但鼠标移开后 hover 效果正常。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 把
:active放在:hover后面写，例如.btn:hover { ... } .btn:active { ... } - 避免用
!important，改用更具体的选择器，比如button.btn:active比.btn:active权重高 - 用浏览器开发者工具的 “Styles” 面板，勾选
:active强制状态，看哪条样式被划掉——被划掉的就是被覆盖了
想让按下反馈更明显？别只改颜色，注意过渡与位移
单纯改 background-color 或 color 很难让人感知“已按下”，人眼对位置偏移和缩放更敏感。但 :active 本身不支持 transition（因为它是瞬时状态），所以必须搭配其他属性或 JS。
使用场景：按钮需要轻微“按下去”的视觉反馈，又不想引入 JS。
实操建议：
- 用
transform: scale(0.98)或transform: translateY(1px)，比改颜色更直观 - 给正常态加
transition: transform 0.1s ease，:active里只写transform值，不要重复写transition - 慎用
box-shadow模拟压感：正常态加内阴影inset 0 2px 4px rgba(0,0,0,0.1)，:active里改成inset 0 -1px 2px rgba(0,0,0,0.15)
兼容性够用吗？老版本 Android 和 IE 的 :active 行为差异
IE8 及以下完全不支持 :active 伪类用于非 <a></a> 元素；Android 4.3 及之前 WebView 中，:active 只在真实鼠标点击时生效，触摸屏几乎无效；iOS 10+ 虽支持，但若页面 viewport 缺少 user-scalable=no，也可能失效。
性能影响：:active 本身无性能负担，但若在其中写大图背景、复杂渐变或触发重排的属性（如 height、margin），会卡顿。
实操建议：
- 对低版本兼容要求高时，用
ontouchstart+ontouchend手动切换 class，比依赖:active可靠 - 避免在
:active中使用filter、clip-path等高开销属性 - 测试真机：模拟器里的
:active往往比真机灵敏得多，特别是带手套模式或辅助触控的设备
最常被忽略的一点：:active 不会在键盘 Enter 或 Space 触发时生效——如果你的按钮要支持无障碍访问，必须用 JS 监听 keydown 并手动模拟按下态。
