:active在移动端常不生效，因浏览器默认禁用非可交互元素的该状态；需确保元素语义正确（如用或加role="button"）、绑定事件、设置touch-action: manipulation等。
移动端点击无反馈？:active 不生效的常见原因
直接写 a:active { background: #eee; } 在 iOS 或 Android WebView 里大概率没反应——不是代码错，是浏览器默认禁用了非可点击元素的 :active 状态。只有被识别为“可交互”的元素（如 <a></a>、<button></button>）才触发，且需满足：元素有 cursor: pointer 或绑定过 touchstart / click 事件，iOS 还要求 viewport 设置 user-scalable=no 或 touch-action: manipulation。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给列表项加
role="button"或用<button></button>替代<div>，避免语义缺失 <li>在 CSS 中补一句 <code>touch-action: manipulation;，强制启用轻触反馈 - 确保父容器没设
pointer-events: none或overflow: hidden截断 touch 区域 - 测试时优先用真机 Safari 和 Chrome，别只信桌面模拟器
- 避免在
touchstart里调用event.preventDefault()，除非你真需要阻止滚动 - 对
<li>或<div> 使用 <code>:active，务必加tabindex="0"，否则部分 Android 机型不识别比
:active更可靠的替代方案纯 CSS 的
:active在复杂交互中不可靠，尤其当列表项内含图片、图标或嵌套链接时。更稳的做法是用 JavaScript 主动切换 class：item.addEventListener('touchstart', () => item.classList.add('is-pressed')); item.addEventListener('touchend', () => item.classList.remove('is-pressed')); item.addEventListener('touchcancel', () => item.classList.remove('is-pressed'));对应 CSS：
.list-item.is-pressed { background-color: #f0f0f0; transition: background-color 0.15s ease; }这样做的好处：
- 不受浏览器对
:active的策略限制 - 可精确控制反馈时长（比如按住 300ms 后才变色）
- 方便和动画库（如 GSAP）或状态管理（如 Vue 的
v-bind:class）集成
为什么不要只依赖
:active做视觉反馈用户手指离开屏幕后，
:active状态立即清除，无法体现“已点击”结果；而真实业务中常需高亮选中项、禁用按钮、或联动其他 UI 变化。这时候仅靠伪类远远不够。容易被忽略的一点是：无障碍访问（如 VoiceOver）下，
:active不产生任何语义变化，屏幕阅读器不会播报“已按下”，必须配合aria-pressed或aria-selected才算完整。所以，
:active最适合做瞬时触觉反馈，而非状态表达。真正要保留下一次点击前的状态，得靠 JS 控制 class 或属性，再用 CSS 做样式映射。 - 不受浏览器对
:active 在不同设备上的表现差异
iOS Safari 对 :active 的激活时长极短（约 100ms），且只在手指按下未松开时生效；Android Chrome 则相对稳定，但旧版 UC/QQ 浏览器可能完全忽略。更麻烦的是：如果页面有 fastclick 类库或自定义 touchend 阻止默认行为，:active 会直接失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
