:active伪类仅在用户主动按下瞬间生效，移动端常因事件支持不足失效；需用touch-action、cursor等优化触发，并配合transform、box-shadow模拟物理下陷；非原生可交互元素及旧浏览器中无效，且无法被JS直接触发。
active伪类触发条件很苛刻，移动端经常失效
不是写了 :active 就一定有反应——它只在用户「正在主动按下」元素的瞬间生效，且依赖底层事件支持。PC端靠鼠标 mousedown 自然触发；但多数触摸屏浏览器（尤其iOS Safari）默认会延迟或跳过 :active，除非你手动干预。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
加touch-action: manipulation，减少300ms点击延迟，提升:active响应概率 - 对关键按钮加
cursor: pointer，部分安卓浏览器靠这个“认出”可点击元素才启用:active - 别依赖
:active做状态持久化（比如按住不放就保持下陷），它天生是瞬态的
位移 + 阴影组合才是下陷感的核心
纯用 transform: translateY(1px) 看起来像“掉下去”，不是“按下去”。真实物理按键下陷的关键是：顶部变暗、边缘收窄、中心微凹——CSS里得靠阴影和缩放配合模拟。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
box-shadow双层阴影：内阴影（inset）模拟凹陷暗区，外阴影模拟按键被压弯后边缘溢出的微光 - 配合
transform: scale(0.98)微缩，避免单纯位移导致元素“漂浮” - 过渡必须限定属性：
transition: transform 0.1s, box-shadow 0.1s，否则其他样式变化（如颜色）会拖慢反馈
示例：
button:active {<br> transform: translateY(1px) scale(0.98);<br> box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.1);<br> transition: transform 0.1s, box-shadow 0.1s;<br>}
IE和旧版Safari不支持:active伪类作用于非元素
在IE11及更早版本、iOS 9以下 Safari 中，div、span、button 等非原生可交互元素写 :active 是无效的——哪怕加了 tabindex 也不行。只有 <a></a> 和真正语义化的 <button></button> 才可靠。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用
<button type="button"></button>，别用<div role="button"> 来“假装”可点击 <li>如果必须用非按钮元素（比如自定义组件封装），得 fallback 到 JS 监听 <code>touchstart/mousedown手动加 class - 测试时真机必测：iOS 10+ 没问题，但 iOS 9 模拟器常骗人，得上真机
- 需要程序化触发反馈？改用自定义 class（如
.is-pressed），再用 JS 控制显隐 - 想让键盘
Enter触发类似效果？监听keydown并临时加 class，再keyup移除 - 别试图用
setTimeout强撑:active时间——它会在事件结束那一刻强制清空，JS 拿不到控制权
active状态无法被JavaScript直接触发
你不能靠 element.classList.add('active') 或 element.click() 让 :active 生效。它是浏览器原生事件驱动的伪类，JS 无权模拟“正在按下”这个瞬时状态。
实操建议：
立即学习“前端免费学习笔记（深入）”；
物理反馈的本质是时间差与视觉欺骗，:active 只负责最短那100毫秒。超过这个范围，就得靠 JS 衔接，或者干脆承认：有些“按下去”的感觉，CSS 真的做不了。
