点击后背景色不持久是因为:active仅瞬时生效，需用:focus（配合tabindex）或JS切换class实现选定状态；transition失效常因未设初始background-color或误用简写；移动端需touch-action: manipulation降低延迟。
点击后标签背景色变化不生效？检查
和
的触发条件
纯 CSS 实现点击后的“选定效果”，不能只靠
，但很多人误以为加个
就能持久变色——其实
只在鼠标按下瞬间生效，松开就没了，根本留不住“选定”状态。
真正要的是“点击后保持背景色”，必须靠 JS 切换 class 或用
配合
。如果标签是
或带
的
:active:focus:hover:active:active:focustabindextabindex
，
:focus
才能被键盘或鼠标点击激活。
:active
是瞬态伪类，适合按压反馈，不适合“选定”
:focus
能持续存在，但默认只对可聚焦元素生效（
button
、
a
、带
tabindex
的元素）
若用
当标签，必须加
tabindex="0"
，否则点不了也聚不了焦
transition
不动？确认背景色属性和初始值是否可动画
transition
对
background-color
生效的前提是：起始色和结束色都得是明确的、可插值的颜色值。比如
transparent
、
currentColor
、
inherit
或未声明初始
background-color
，都会导致过渡失败或跳变。
务必给元素显式设置初始
background-color
（哪怕只是
background-color: #fff
）
避免混用
background
简写和
background-color
单独设——简写可能覆盖掉颜色，让过渡无从谈起
不要用
background: linear-gradient(...)
代替纯色，渐变无法与纯色平滑过渡
推荐写法：
transition: background-color 0.2s ease;
，别省略时间值，0s 会退化为无过渡
用 JS 控制“选定”状态更可控，但要注意 class 切换时机
比起依赖
:focus
，多数场景下用 JS 绑定
click
并切换
.selected
类更直观、兼容性更好，也方便后续扩展（比如单选/多选逻辑）。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
别直接用
onclick="this.classList.toggle('selected')"
—— 这样无法解耦，也不利于批量绑定
推荐事件委托或
forEach
绑定：
document.querySelectorAll('.tag').forEach(el => el.addEventListener('click', () => el.classList.toggle('selected')))
记得在 CSS 中定义
.selected { background-color: #007bff; }
，并确保它和初始色之间有明确过渡
如果要支持键盘操作（空格/回车触发），还得监听
keydown
，判断
e.key === ' '
或
'Enter'
移动端点击有延迟且可能失焦？加
touch-action: manipulation
在 iOS Safari 和部分安卓浏览器里，纯
:focus
响应点击会有约 300ms 延迟，且点击后焦点容易丢失，导致背景色闪一下就恢复。这不是 CSS 错，是浏览器默认行为。
给标签元素加
style="touch-action: manipulation;"
，能关闭双击缩放，同时大幅降低点击延迟
仍需配合
tabindex
和
:focus
使用，否则移动端 touch 后依然不聚焦
如果用了 JS 切换 class，这个样式不是必须，但加上更稳妥；如果纯靠 CSS，则几乎必须
注意：
touch-action: manipulation
在老版 Android WebView 中支持有限，如需兼容可降级为
cursor: pointer
+ JS
CSS 的“点击后选定”本质是状态管理问题，不是样式问题。颜色过渡只是表象，关键在怎么可靠地捕获和维持那个“被点中了”的状态——
:focus
有门槛，
:active
不持久，JS 切 class 最直白，但也最容易漏掉键盘支持或移动端适配。