:active是瞬时状态，仅在按下瞬间生效，松开即退出；其持续时间极短（ios约60–100ms），不支持过渡控制，真正起作用的是基础选择器上的transition，用于控制退出时的平滑恢复。
为什么:active点击状态持续时间很短
因为:active不是“保持态”，而是浏览器对“按下瞬间”的瞬时响应——它只在鼠标左键按住或手指触屏未抬起的那几毫秒内存在，松开就立刻退出，没有缓冲、不等待动画、也不受transition控制。
:active和transition一起用为什么还是闪一下就没了
根本原因在于 transition 不作用于 :active 本身，而是作用于“退出 :active 后回到哪个状态”。比如你写了 button { transition: background-color 0.3s; }，那么松开按钮后，颜色会从 :active 的值平滑过渡回默认色；但如果你在 button:active 里也写了 transition: 0s，反而可能打断这个继承链，导致退场突兀或失效。
- :active 里只该改属性值（如
background-color、transform），别碰transition - 所有过渡逻辑必须写在基础选择器（如
button）上 - 移动端更明显：iOS Safari 的 :active 实际持续约 60–100ms，比桌面端还短
想让点击反馈“看得见”，该怎么做
靠视觉对比 + 快速过渡，而不是拉长 :active 持续时间。人眼能感知的最小变化窗口约 50ms，低于这个阈值就容易忽略。
- 优先用
transform: scale(0.98)或opacity: 0.85，比只改color更易察觉 - 加
transition: transform 0.05s, opacity 0.05s—— 短而干脆，不拖沓 - 务必配
touch-action: manipulation（移动端）和-webkit-tap-highlight-color: transparent（iOS） - 原生
<button></button>比div[role="button"]更可靠，后者需额外加tabindex="0"
真要“按下去就变、松开才回”，别碰 :active 的生命周期
:active 天然不适合做状态持久化。所谓“松开后颜色慢慢恢复”，其实是基础选择器的 transition 在工作；而“按下去就变”，只是 :active 覆盖了那个瞬间的样式。一旦你想控制“什么时候开始变”“什么时候结束变”，就得换 JS 控制类名，比如监听 touchstart 加 is-pressed，再用 animationend 清理。
最常被忽略的一点：:active 规则权重必须高于 :hover 和 :focus，否则在焦点叠加时直接被覆盖——尤其在表单控件或导航项里，很容易白写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
