:active伪类不触发的主因是touch-action:none阻断或选择器权重不足；应删父级touch-action:none、确保:active写在:hover后、用具体选择器提升权重，并通过devtools触屏模式验证生效。
:active 伪类不触发的典型表现与定位方法
按钮点击没下沉感，不是代码写得不对，而是 :active 状态根本没触发或样式被覆盖了。常见现象是鼠标按下去按钮纹丝不动，或者只闪一下颜色——这说明 :active 规则压根没跑起来。
原因通常就两个：touch-action: none 在父容器上堵死了激活态，或者你的 :active 选择器权重不够，被 :hover 或全局重置样式盖过去了。
- 检查按钮父级是否写了
touch-action: none（尤其在移动端框架或轮播组件里），删掉它或改成touch-action: manipulation -
:active必须写在:hover之后，否则:hover会覆盖active效果 - 别依赖
!important强行提权，优先用更具体的选择器，比如.btn-primary:active而不是button:active - 真要确认是否生效，打开 DevTools 的 Emulation 面板，切到触屏模式点几下，看 Styles 里
:active规则前面的勾是不是亮的
下沉效果必须用 transform + box-shadow 协同实现
“下沉”不是往上跳，是视觉上被按进去了——所以 transform: translateY() 的值必须是正数，比如 2px。单靠背景色变化太弱，用户感知不到；位移 + 阴影收缩才是主反馈。
- 默认状态加
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: transform 0.1s ease, box-shadow 0.1s ease - 别写
transition: all 0.1s——万一哪天加了font-size或opacity，动画会意外参与
移动端 :active 延迟与兼容性处理
安卓 WebView 和旧版 iOS Safari 里，:active 可能只在松开手指后才触发，导致反馈滞后。这不是你代码的问题，是浏览器行为。
- 不要指望
:active在所有环境里都即时响应；真要兼容极旧环境，可以加空事件：<button ontouchstart=""></button>，强制启用触摸激活 - 移动端需加
-webkit-tap-highlight-color: transparent，否则点击闪白 -
transition时间卡在0.1s最稳妥：设成0.05s像没反应，0.2s开始有延迟感，尤其连续点击时会堆叠动画 - 注意阴影
blur值必须克制：移动端超过4px就开始吞点击热区；桌面端超过6px，边缘发虚，“厚度”就变成“晕开”
别用 border-bottom 模拟厚度，box-shadow 才是核心
border-bottom 单独用只会加一条线，既不能模拟光效，也无法过渡，还容易和圆角冲突。真要“有厚度”，必须靠多层 box-shadow 配合明暗与偏移。
- 真正起厚度作用的是三类阴影协同：
inset 0 1px 0 rgba(255,255,255,0.8)（顶部高光）、0 2px 4px rgba(0,0,0,0.15)（基础投影）、inset 0 -1px 1px rgba(0,0,0,0.1)（底部微内阴影） - 顺序很重要：内阴影写前面，外阴影写后面；浏览器按书写顺序叠加，高光必须透出来
-
:active状态必须同步收缩阴影 + 下沉：只改背景色或只减模糊值，用户根本感觉不到“按下去” -
border-bottom唯一合理用途是作为视觉锚点，在默认态下极细（1px）、低对比（rgba(0,0,0,0.05)），且:active中立刻设为transparent
:active 有没有被浏览器真正识别——很多问题出在父级 touch-action 或选择器权重上，而不是下沉逻辑本身。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
