移动端:active需配合touch-action:manipulation、-webkit-tap-highlight-color:transparent及可交互语义（如button或tabindex="0"）才生效，否则浏览器不触发；须显式声明初始color和transition，避免仅在:active中设color；推荐color+transform:translatey(1px)组合反馈。
:active 在移动端默认不触发，光写样式没用。必须配合 touch-action: manipulation、-webkit-tap-highlight-color: transparent 和可交互语义（比如 button 或带 tabindex="0" 的元素），才能让文字颜色变化真正生效。
为什么真机上文字点击没变色
不是 CSS 写错了，是浏览器压根没把你的元素当“可点”。iOS Safari 和多数安卓 WebView 对 :active 有严格激活条件：纯 div、没 cursor: pointer、没绑定任何触摸事件、也没 role 或 tabindex 的元素，:active 根本不会计算——开发者工具里都看不到它被匹配。
- 检查元素是否能获取焦点：在真机上长按，看有没有系统光标或虚线框；没有就说明不可聚焦
- 别信 Chrome DevTools 的 “Toggle device toolbar” 预览，它模拟不出真实触摸事件流
- 如果用了
pointer-events: none或user-select: none，它们会连带抑制:active触发
文字变色必须显式声明初始 color 和 transition
只在 :active 里改 color，但常态下没设 color 或没配 transition，动画就断了。浏览器无法从“未定义”插值到新颜色。
- 正确写法：
button { color: #333; transition: color 0.15s ease; } button:active { color: #007bff; } - 错误写法：
button:active { color: #007bff; transition: color 0.15s ease; }（松手瞬间直接跳回，无缓动） - 避免用
opacity做主反馈：透出下层文字或背景时容易造成视觉干扰，尤其在滚动容器中错位明显
移动端必须加的三行保底样式
缺一不可，否则文字变色在 iOS 或部分安卓 WebView 上就是静音状态：
button,
.text-link {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
cursor: pointer;
}
-
-webkit-tap-highlight-color: transparent干掉系统蓝框，否则先闪一下再变色，体验割裂 -
touch-action: manipulation告诉浏览器“这是单点操作，别等双击、别缩放”，否则延迟 200ms+ 才触发:active -
cursor: pointer是最轻量的“可点击”信号，比空ontouchstart=""更干净，也兼容无障碍
文字变色不如加一点位移更可靠
纯颜色切换在弱光或小字号下反馈感弱，且易被误判为加载态。加轻微 transform: translateY(1px) 或 scale(0.99) 能强化“按下”心理暗示，而且性能比改 margin 或 padding 好得多。
- 推荐组合：
color+transform: translateY(1px)，过渡时间控制在0.08s–0.15s之间 - 不要对
font-size做过渡：重排版开销大，且 iOS 下可能触发字体抗锯齿重绘，导致闪烁 - 如果文字在
position: fixed或transform容器里，检查是否意外创建了 stacking context，把:active效果遮住了
最常被忽略的是：文字变色必须和元素的可交互性绑定，而不是单独套个 class 就完事。哪怕只是个 span，也要加 role="button" tabindex="0"，否则在某些 WebView 里连 touchstart 都监听不到，:active 更无从谈起。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
