:active伪类仅在用户按下时瞬时生效，松开即消失，无法保持高亮状态；需用JavaScript通过classList.toggle()控制is-active类实现持久高亮，并注意移动端需添加cursor:pointer、touch-action:manipulation等兼容处理。
:active 伪类不会“保持活跃态”，它只在鼠标按下或手指按住的那几十毫秒内生效，松开就立刻消失。想让按钮点击后持续高亮，必须用 JavaScript 控制类名，而不是依赖 :active。
为什么 :active 点完就失效
:active 是瞬时状态伪类，不是“选中态”或“激活态”。它只响应用户正在按下的动作，不记录历史、不维持状态。浏览器一旦检测到 pointerup/touchend，就自动移除该状态——CSS 本身没有记忆能力。
- 常见错觉：写了
button:active { background: red; }却看不到效果 → 很可能是漏了transition或cursor: pointer，导致变化太快或用户没意识到可点 - 移动端更明显：
:active在 iOS Safari 默认不触发，除非加了touch-action: manipulation或显式onclick属性 - 如果按钮是
<div>而非语义化<button>，:active可能压根不生效，需手动加tabindex="0"和role="button"
用 classList.toggle() 实现点击切换高亮
这是最轻量、最可控的方式，适合单个按钮开关、标签页切换等场景。
- HTML 中给按钮加 class（如
btn-toggle），不要依赖id—— 更易复用 - CSS 定义
.btn-toggle.is-active样式，和常态样式并列写，避免权重冲突 - JS 绑定
click事件，调用this.classList.toggle('is-active')，不用手动add/remove - 如果需要互斥（比如导航栏只允许一个高亮），就在 toggle 前先清掉所有同级
.is-active
示例：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
<button class="btn-toggle">启用通知</button>
.btn-toggle.is-active { background-color: #007bff; color: white; }
document.querySelectorAll('.btn-toggle').forEach(btn => {
btn.addEventListener('click', () => btn.classList.toggle('is-active'));
});
移动端真机上 :active 失效的硬性条件
哪怕你写了正确的 button:active，在手机上也可能完全没反应——这不是代码错，而是平台限制。
- 必须加
cursor: pointer（iOS/Android 都认这个信号） - 必须设
touch-action: manipulation，否则 Safari 等待 300ms 判断是否双击 -
-webkit-tap-highlight-color: transparent必须加，否则 iOS 会覆盖一层灰色蒙版，盖掉你的阴影或颜色变化 - 阴影值不能用
em或百分比，只认px/rem；缩放优先用scale()，不用translateY()（部分安卓 WebView 重排闪烁） - 父容器若设了
overflow: hidden，transform: scale()后的阴影可能被裁掉，得检查“Computed”面板里的实际渲染尺寸
真正难的不是写出 :active，而是让那个“按下瞬间”的反馈，在各种设备上都快、准、可信——过渡时间得卡在 0.16s–0.22s，缓动函数得用 cubic-bezier(0.4, 0, 0.2, 1)，而所有这些，都得在真机上摸着屏幕试三次才算数。
