移动端点击反馈不生效的主因是iOS Safari等浏览器默认不触发:active伪类，需通过绑定触摸事件、设置cursor:pointer或touch-action:manipulation等方式激活，并确保颜色值类型一致、显式声明初始状态及过渡属性。
移动端点击反馈不生效？检查 :active 伪类是否被忽略
很多同学加了 transition 却点不动、没反应，根本原因是 iOS Safari 和部分安卓浏览器默认不触发 :active —— 它只在「有真实触摸事件绑定」或「元素可聚焦」时才激活。
- 给元素加
ontouchstart=""（空处理）能强制激活:active，但更推荐用cursor: pointer或touch-action: manipulation -
button、a、带tabindex的div天然支持:active；纯div默认不响应 - 不要依赖
:hover做点击反馈——移动端没有悬停概念，它在真机上基本无效
transition 写在哪？背景色变化必须配对声明
只写 transition: background-color 0.2s 不够。如果目标色是通过 :active 设置的，而初始状态没显式定义 background-color（比如继承自父级或浏览器默认），过渡就会失效。
- 初始状态必须明确写出
background-color，哪怕只是background-color: transparent - 推荐写全：
transition: background-color 0.2s ease, opacity 0.2s ease，避免只过渡一个属性导致其他变化突兀 - 别用
transition: all 0.2s—— 它会把 box-shadow、transform 等意外变化也拖进动画，造成卡顿或意外闪烁
为什么点了没变色？检查颜色值类型是否一致
transition 对颜色插值有严格要求：起始和结束值必须是同类型颜色格式，否则直接跳变。
-
background-color: #007bff→background-color: rgb(0, 123, 255)✅ 可过渡（等价） -
background-color: #007bff→background-color: hsl(210, 100%, 50%)❌ 大概率跳变（浏览器兼容性差） - 最稳写法：全程用
rgb()或hsl()，避免混用十六进制与函数式
真机测试时反馈延迟？关掉 :active 的 300ms 延迟
老式 WebView 或未启用优化的页面，点击后要等约 300ms 才触发 :active，看起来像“卡住”。这不是 transition 的问题，而是点击延迟本身。
立即学习“前端免费学习笔记（深入）”；
- 加
meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"是基础，但还不够 - 更关键的是设置
touch-action: manipulation在点击容器上，它会告诉浏览器“这是按钮行为”，跳过延迟判断 - 如果用 JavaScript 监听
click，记得用fastclick库或监听touchstart替代 —— 但 CSS 方案优先走:active+touch-action
真正麻烦的不是写几行 CSS，而是不同机型对 :active 的触发时机、颜色插值精度、甚至是否支持 transition 到透明色（rgba(0,0,0,0)）都不统一。上线前至少在 iOS Safari、Chrome for Android、微信内置浏览器里点三遍。
