:active“没反应”是因为它仅在按下瞬间生效且易被覆盖或抑制；需确保样式触发、避免transition拖慢、组合background-color/transform/box-shadow增强反馈，并注意:focus冲突及移动端兼容方案。
为什么
因为:active只在鼠标按下、触摸开始或空格键按下的那一帧生效，松手即退出——它不是状态保持机制，而是瞬时事件钩子。你看到“没反应”，大概率是样式压根没触发，或者变化太弱无法察觉。
常见错误现象包括：:active规则被:hover或:focus覆盖（尤其:focus在Chrome/Safari中点击后自动激活）、父元素设了pointer-events: none、移动端未加cursor: pointer导致iOS Safari忽略:active、又或者transition写在了基础样式里，把按下反馈拖慢成缓动动画。
如何让:active真正生效且可感知
核心是两点：确保它被浏览器执行，再让它视觉上“够响”。不要依赖单一属性变化。
- 用开发者工具检查
:active是否在点击瞬间出现在元素的“Styles”面板中；没出现就说明被覆盖或触发条件不满足 -
:active声明必须放在:hover和:focus之后，否则层叠优先级低，样式不会应用 - 禁用
transition对:active本身的影响：把transition写在基础按钮样式里没问题，但别指望它让:active“平滑进入”——那会削弱瞬时反馈感 - 组合使用三个低成本高感知的属性：
background-color（主色降低15%亮度）、transform: translateY(1px)（模拟下压）、box-shadow: inset 0 1px 2px rgba(0,0,0,0.1)（增加凹陷感）
:focus和:active混用时容易踩的坑
:focus和:active本质不同：:focus是焦点态（可键盘操作），:active是按下态（瞬时）。两者常同时触发，但样式冲突极多。
典型问题：button:focus { outline: 2px solid #3498db; } + button:active { background-color: #2c3e50; }，结果点击后背景变深了，但蓝色轮廓还罩着，反而掩盖了按压反馈。
解决建议：
- 如果按钮需要键盘支持，
:focus不能简单outline: none，应提供替代焦点样式（如加边框或阴影） - 避免在
:focus中设置与:active冲突的background-color或transform - 想兼顾鼠标+键盘用户？用
button:focus:active单独定义组合态，比分别写更可控 - IE8–10中
:active基本不可靠，必须配合JS加class（如is-pressed）才能稳定响应
移动端:active失效的临时解法
iOS Safari默认对非可点击元素延迟300ms触发:active，而原生<button></button>虽可点击，仍可能因touch-action策略被抑制。
实操建议：
- 给按钮加
style="touch-action: manipulation;"，强制启用快速触摸响应 - 补一句
cursor: pointer，部分Android WebView依赖这个激活:active - 禁用
-webkit-tap-highlight-color: transparent，防止点击高亮盖掉你的:active样式 - 真要100%可靠？放弃纯CSS方案，用
ontouchstart+ontouchend切换class，和桌面端onmousedown/onmouseup统一处理
最麻烦的点往往不在写法，而在你没意识到:active根本不是状态管理工具——它只负责“那一帧”，其余都得靠你兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
