:active在div上无效是因为浏览器不将其视为可交互元素；需添加role="button"、tabindex="0"和ontouchstart，或改用标签，并通过js切换class实现持久状态。
为什么:active在div上完全没反应
因为浏览器根本没把它当“可点击元素”——:active只对语义化交互元素（如<button></button>、<a></a>）或显式声明交互意图的元素生效。普通<div>即使加了<code>onclick，iOS Safari 也不会触发:active状态，WebKit 不会为其创建 active state stack。
- 现象：
div.btn:active { background: red; }在真机上毫无变化 - 验证方式：用 DevTools 选中元素，按住鼠标/手指，看 Elements 面板里是否出现
:active高亮标记 - 快速修复：给
<div>加 <code>role="button" tabindex="0" ontouchstart=""，三者缺一不可 - 更稳妥方案：直接换用
<button></button>标签，避免兼容性纠缠 - 常见误解：写
a:active { color: blue; }以为点完链接还蓝着——不会 - 真正适用场景：按钮压感反馈、临时视觉确认（比如点击音效配合缩放）
- 如果需要“按住期间平滑过渡”，
transition必须写在常态选择器上，例如：button { transition: transform 0.1s; } button:active { transform: scale(0.95); } - 错误写法：
button:active { transform: scale(0.95); transition: transform 0.1s; }——松手瞬间跳回，无过渡 - 最轻量解法：在
上加空touchstart监听：document.body.addEventListener('touchstart', function() {}); - 必须避开的坑：在
touchstart里调用event.preventDefault()，它会中断:active激活链 - 样式干扰项：
-webkit-tap-highlight-color: transparent和user-select: none要一起加，否则系统蓝框盖掉你的:active - 安卓相对友好，但若元素没
cursor: pointer或没事件监听，Chrome 也可能忽略:active - Tailwind 用户：需在
tailwind.config.js的variants中显式开启['active'] - 检查 DevTools 中
:active样式是否被划掉——如果是，说明被更高优先级规则覆盖 - 提高权重：用
button.my-btn:active代替.my-btn:active，或加!important（慎用） - 事件目标错位：JS 绑了
click在父容器，但:active写在子元素上，按下去时状态不匹配
移动端点一下就闪退，根本留不住
:active本就是瞬时状态，不是“点击后保持”。它只存在于鼠标按下或手指触屏到松开的那一小段时间，松手即失效。想让它“看起来停留”，本质是错用了语义——导航高亮、开关状态、列表选中，都该用 JS 切换 class="active" 或 is-pressed 这类自定义类，而不是依赖伪类。
iOS Safari里:active延迟或不触发
iOS Safari 默认为优化滚动性能，会延迟甚至跳过:active渲染。它只在<meta name="viewport">存在且未被 JS 移除的前提下，对绑定touchstart事件的元素启用该伪类；但即便如此，首次触摸仍有约 300ms 延迟。
框架里:active样式被覆盖或无效
Tailwind、Bootstrap 等框架默认不启用:active变体，或用高权重选择器（如.btn:active）锁定样式，你写的button:active很容易被干掉。另外，:focus规则若写在:active后面且优先级相同，就会覆盖它。
:active的支持程度各不相同，得真机多环境反复点按验证，不能只信模拟器或自己设备的一次测试。
