:active不是保持态，而是瞬态操作确认；颜色“闪一下”因松开后按:hover或默认状态的transition恢复，应在基础选择器设transition，:active仅改颜色值。

为什么:active里设transition: 0s颜色还是“闪一下就没了”

这不是浏览器 bug，而是对状态切换逻辑的误判。:active本身只在按下瞬间存在，松开后立刻退回到:hover或默认状态——而这两个状态上若定义了transition: background-color 0.3s，颜色就会按这个时间平滑恢复，看起来就像“瞬间消失”其实是“缓着消失”。更糟的是，如果:active里写了transition: 0s，它反而会干扰退出时的过渡继承，导致行为不可控。

• :active不是“保持态”，不能靠它维持颜色
• 松开鼠标后走的是.btn → .btn:hover或.btn → .btn路径，过渡由目标状态的transition决定
• transition: 0s在:active中基本无效，还可能覆盖父级过渡声明

想让点击变色“按下去就变，松开就回”，别碰:active的transition

真正该控制的是“松开后怎么回”。只要确保:active只改颜色值，不改过渡规则，把过渡逻辑全交给基础选择器即可。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 基础样式写transition: background-color 0.25s ease，所有状态（包括:active → :hover）都走这个规则
• :active里只写background-color: #0056b3，不加任何transition相关声明
• 如果想让“按下去”更干脆，可加transform: scale(0.98)配合transition，视觉上比调快颜色过渡更有效

移动端:active失效或延迟？先检查touch-action和viewport

iOS Safari 和部分安卓 WebView 中，:active在纯<div>上可能压根不触发，或有 300ms 延迟。这不是 CSS 写错了，是浏览器交互策略问题。 <ul> <li>确保页面有<code><meta name="viewport" content="width=device-width, initial-scale=1">

给按钮加style="touch-action: manipulation"，明确告诉浏览器“这是可点区域”

避免用div模拟按钮——改用<button>或至少加tabindex="0"

真机调试时，在 Chrome DevTools 的 Rendering 面板勾选 Emulate CSS :active state 强制激活验证

要“点击后保持颜色”，:active根本不是解法

所有想靠:active实现持久选中效果的尝试，最后都会卡在松开即失效上。它天生就是瞬态的，强行用 JS 模拟:active生命周期也绕不开这个限制。

立即学习“前端免费学习笔记（深入）”；

• 持久选中必须用 class 切换：el.classList.toggle('selected')
• CSS 里定义.selected { background-color: #007bff; }，并确保它和默认色之间有transition
• 需要键盘支持？监听keydown，判断e.key === 'Enter'或' '
• 别在:active里写!important盖掉.selected——这会让 JS 控制彻底失效

真正容易被忽略的是：:active 的存在意义从来不是“保持”，而是“确认用户正在操作”。把它当状态管理用，等于拿螺丝刀当锤子——能敲两下，但很快会崩刃。