用 :active 伪类只能实现点击瞬间变色，松开即恢复；要点击后保持变色，须用 javascript 切换 class 并配合 css 定义 .active 样式。
按钮点击后变色，用 :active 伪类是最直接的方式，但它只在鼠标按下（或触屏按住）的瞬间生效，松开就恢复——不是“点击后保持变色”，这点必须先搞清。
为什么 :active 看起来“没反应”？
常见错觉：写了 button:active { background: red; }，但点一下颜色闪一下就没了，以为代码错了。其实它工作正常，只是行为设计如此：:active 描述的是“正在被激活”的瞬时状态，不是“已被点击”的持久状态。
- 触发条件：仅限鼠标左键按下、触摸屏手指按住、键盘空格/回车触发时
- 持续时间：从按下到松开为止，通常不到 100ms
- 不适用于“切换开关”“已选中”这类需要记忆状态的场景
想实现“点击后保持变色”，该用什么？
需要用 JavaScript 控制 class 切换，配合 CSS 定义对应样式。核心是把“状态”存到 DOM 上，而不是依赖伪类。
- 给按钮绑定
click事件，用classList.toggle('active')切换自定义 class - CSS 中写
button.active { background: #4CAF50; }，而非:active - 如果只需单次点击（非切换），用
classList.add('clicked')+pointer-events: none防重复点击 - 注意：别用
onclick="this.style.background='red'"写内联样式，破坏可维护性
:active 还值得用吗？
值得，但要用对地方——它适合提供即时反馈，比如按钮按下的压感效果，提升交互真实感。
- 移动端需加
touchstart兼容，否则部分 iOS Safari 不触发:active - 默认情况下，
:active在<a></a>标签上可能被:visited覆盖，顺序要写成:link → :visited → :hover → :active - 避免只靠颜色变化做反馈：色盲用户可能无法识别，建议叠加
transform: scale(0.98)或边框粗细变化
真正容易被忽略的是状态归属问题：变色到底表达“正在操作中”还是“已选中”？前者用 :active，后者必须用 JS + class。混淆这两者，后续加功能时就会反复推翻样式逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
