:active 无反应主因是 user-agent 样式干扰、overflow: hidden 截断 transform 或移动端延迟；它仅在按下时生效，无法表示“已复制”，需 JS 控制 class/data 属性实现持久反馈。
点击复制按钮时:active没反应？检查是否被用户代理样式覆盖
很多同学发现给按钮加了 :active { background-color: #333; transform: translateY(1px); }，但点击时完全没变化。根本原因通常是浏览器默认的 user-agent stylesheet 里，button 的 outline 或 border 在干扰视觉反馈，或者更常见的是——父容器设置了 overflow: hidden，把下移的 transform 截掉了。
- 务必在开发工具里勾选“伪类（:active）”，确认样式是否真的被应用（而不仅是写对了）
- 如果按钮内含
svg或图标字体，transform可能只作用于文字部分，建议对button本身设transform，并加will-change: transform避免重绘抖动 - 移动端 Safari 对
:active支持有延迟，默认需要 300ms 点击后才触发，得加touch-action: manipulation或用fastclick库绕过
复制逻辑和视觉反馈必须解耦，别把navigator.clipboard.writeText()塞进:active
:active 是纯 CSS 状态，它不能执行 JS，也不能监听复制成功或失败。很多人误以为“点了就复制+变色”是一体的，结果把 JS 复制逻辑和样式切换混在一起，导致反馈错位或重复触发。
- 视觉反馈（颜色加深、下移）由
:active自动控制，无需 JS 干预 - 复制动作必须放在
click事件里，且要处理 Promise 拒绝：比如用户拒绝权限时，navigator.clipboard.writeText()会抛NotAllowedError，不 catch 就静默失败 - 成功后建议用 JS 切换按钮的
data-state属性（如data-state="copied"），再用 CSS 写button[data-state="copied"] { background: #4CAF50; }，避免用 JS 直接改style
移动端点击反馈偏弱？:active 需要配合cursor: pointer和-webkit-tap-highlight-color
iOS 和 Android 原生浏览器对 :active 的响应非常保守，尤其当按钮没有明确交互暗示时，可能连背景色都不变。这不是 bug，是系统级优化策略。
- 必须给按钮加
cursor: pointer（桌面端）和touch-action: manipulation（移动端），否则部分安卓机直接忽略:active - iOS 默认点击高亮是半透明灰色遮罩，会盖掉你的
:active效果，加-webkit-tap-highlight-color: transparent关掉它 - 下移
transform: translateY(1px)在小屏上容易看不清，建议同时微调box-shadow: 0 1px 2px rgba(0,0,0,0.1)加强按下感
为什么复制后不能立刻恢复:active状态？因为:active只在按住时存在
这是最常被误解的一点：:active 不是“已点击”状态，而是“正被按下”的瞬时状态。松开手指/鼠标后，它自动消失。所以你无法用它表示“已复制成功”。想实现“点击→变绿→2秒后恢复”，必须用 JS 控制 class 或 data 属性。
立即学习“前端免费学习笔记（深入）”；
- 不要写
button:active.copied { ... }——:active和.copied不会同时生效 - 推荐模式：
button→ 点击触发copy()→ 成功则加copiedclass → 用setTimeout移除 → CSS 定义button.copied样式 - 注意：如果用户快速连点，
setTimeout可能叠加，建议用clearTimeout清前一个定时器
:active 是个“按住瞬间”的快照，它不记忆、不延时、不响应 JS 状态。所有“点击后保持反馈”的需求，本质都是 JS + class/data 属性 + CSS 的协作。漏掉任一环，就会出现“点了没反应”“复制完还卡在深色”“手机点不动”这类问题。 
