:active不生效主因是touch-action:none阻断或选择器权重不足；应删父级touch-action:none、确保:active在:hover后、用具体选择器、配transform translateY(2px)和box-shadow收缩，并在默认状态写transition。
按钮点击没下沉感，不是代码写得不对，而是 :active 状态根本没触发或样式被覆盖了。
为什么 :active 不生效
常见现象是鼠标按下去按钮纹丝不动，或者只闪一下颜色——这说明 :active 规则压根没跑起来。原因通常就两个：touch-action: none 在父容器上堵死了激活态，或者你的 :active 选择器权重不够，被 :hover 或全局重置样式盖过去了。
- 检查按钮父级是否写了
touch-action: none（尤其在移动端框架或轮播组件里），删掉它或改成touch-action: manipulation -
:active必须写在:hover之后，否则:hover会覆盖active效果 - 别依赖
!important强行提权，优先用更具体的选择器，比如.btn-add-to-cart:active而不是button:active
transform + box-shadow 才是真下沉
“下沉”不是往上跳，是视觉上被按进去了——所以 transform: translateY() 的值必须是正数，比如 2px。配合 box-shadow 收缩，才能形成真实凹陷错觉。
- 默认状态加
box-shadow: 0 4px 8px rgba(0,0,0,0.2)模拟凸起 -
:active里写transform: translateY(2px)+box-shadow: 0 2px 4px rgba(0,0,0,0.15) -
transition必须同时包含这两个属性：transition: transform 0.1s ease, box-shadow 0.1s ease；分开写比all更可控 - 别在
:active里改background-color——颜色变化太慢，用户感知弱；位移+阴影才是主反馈
移动端必须手动“唤醒” :active
安卓 WebView 和旧版 iOS Safari 里，:active 可能只在松开手指后才触发，导致反馈滞后。这不是你代码的问题，是浏览器行为。
- 给按钮加
cursor: pointer能提前激活部分移动端的点击态 - 确保按钮有
touch-action: manipulation，这是激活移动端:active的最小必要条件 - 避免在按钮父容器上设
overflow: hidden，它可能裁掉translateY后多出的阴影 - 如果仍失效，可用
ontouchstart=""空事件强制启用触摸激活（）
transition 写错位置，动画就卡顿或消失
:active 状态本身不负责过渡，过渡必须写在默认状态（即未激活时）的 transition 声明里。写成 button:active { transition: ... } 是无效的。
- 正确写法：
button { transition: transform 0.12s cubic-bezier(0.2, 0, 0.1, 1), box-shadow 0.12s; } - 别用
transition: all——在某些浏览器中会漏掉box-shadow或transform的过渡 - 时间控制在
0.1s–0.15s：短于0.1s用户几乎看不到，长于0.15s就像卡顿 -
cubic-bezier(0.2, 0, 0.1, 1)比ease更自然：开头稍快，结尾带收束感，模拟真实按压回弹
真正难的不是写几行 CSS，而是确认 :active 有没有被浏览器真正识别——先打开 DevTools 的 Emulation 面板，切到触控模式，点住按钮看样式是否实时生效。深色模式下记得调高 inset 阴影的透明度，否则凹陷会反向发亮。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
