如何用CSS3解决移动端触摸反馈不明显的问题？

必须为元素添加 touch-action: manipulation 并配合 role="button" 和 tabindex="0"，iOS Safari 才会触发 :active；否则即使样式正确，首次触摸也无反馈，因浏览器未进入激活状态。

直接加 touch-action: manipulation 并配合语义化交互声明，才能让 :active 伪类在真机上即时生效；纯靠 transition 或 background-color 变化本身不会触发反馈，因为浏览器根本没进入 :active 状态。

为什么写了 :active 样式却没反应？

不是 CSS 写错了，是 iOS Safari 默认不激活 :active —— 它只对「被识别为可点击」的元素才响应。普通 <div> 即使加了 cursor: pointer 或 transition，首次触摸仍可能延迟甚至完全不渲染。常见现象包括：刚打开页面第一次点无反馈、动态插入的按钮按压态消失、父容器设了 pointer-events: none 导致事件无法到达。

touch-action: manipulation 必须加在具体元素上

这个属性不继承，也不能只写在 html 或 body 上。它只在触发原生 click 的上下文中起作用：

1. 原生可点击标签（如 <button>、<a>）默认已优化，但如果你重写了 display 或显式设置了 touch-action: auto，就得手动补回
2. 自定义按钮（如 <div class="btn">）必须单独加，且要搭配 role="button" 和 tabindex="0" 才能被 iOS Safari 认出
3. 轮播图外层容器、地图区域、横向滚动列表不能加——否则会禁用平移手势
4. 在 DevTools 的 Computed 面板里确认最终值确实是 manipulation，而不是被第三方样式覆盖成 auto

真正有效的按压反馈写法

光有 :active 不够，视觉变化必须足够明确、且避免触发重排：

1. 优先用 background-color 或 opacity 变化，别只改 color（文字按压感弱）
2. 慎用 transform: scale()：iOS 上可能闪烁；如必须用，加 will-change: transform
3. 过渡时间建议控制在 0.12s 以内，太长反而让用户觉得“卡”
4. 确保父容器没设 overflow: hidden，且自身没被 pointer-events: none 拦截
5. 示例：.btn:active { background-color: #e0e0e0; opacity: 0.8; transition: background-color 0.12s, opacity 0.12s; }

最常被忽略的一点：真机验证不可替代。模拟器里一切正常，不代表用户手指按下去就有反馈；iOS Safari 对「首次触摸唤醒」和「动态节点注册」有隐式限制，不连真机调试，很容易漏掉关键失效场景。