按钮点击瞬间颜色没变是因为未定义 :active 伪类；它仅在鼠标按下或触屏按住时生效，需显式声明且顺序置于 :hover 之后，移动端需额外处理，持久变色必须结合 JS 控制 class。
按钮点击瞬间颜色没变，是没用 :active 吗？
多数人以为加个 :hover 就能覆盖点击效果，其实点击（按住不放）时生效的是 :active 伪类，不是 :hover 或 :visited。它只在鼠标按下、触屏手指按住的那几十毫秒内起作用。
常见错误是把样式写成这样：
button:hover { background: red; }结果点下去颜色不变——因为没定义 :active。
-
:active必须显式声明，且优先级和:hover相同，顺序写在后面才能覆盖（比如:hover在前、:active在后） - 移动端真机测试时，
:active可能延迟或失效，需加touch-action: manipulation或用 JS 模拟 - 如果按钮是
<input type="button">，部分旧浏览器对:active支持弱，建议统一用<button></button>标签
想让点击“松开后”颜色保持住，不能只靠 CSS 伪类
:active 和 :hover 都是瞬态伪类，松手就恢复原样。真要实现“点击一次变色、再点一次还原”，必须借助 JS 控制 class 切换。
纯 CSS 没法记住状态，这是它的设计限制，不是写法问题。
立即学习“前端免费学习笔记（深入）”；
- 推荐模式：CSS 定义两个 class，如
.btn和.btn--pressed，JS 切换classList.toggle('btn--pressed') - 避免直接操作
style.backgroundColor，否则难以维护、易和 CSS 冲突 - 若用 React/Vue 等框架，用 state 控制 class 名更稳妥，别在事件里硬写内联样式
:focus 和 :focus-visible 对键盘用户很关键
仅靠 :active 无法覆盖键盘操作（比如 Tab 进入后空格触发），此时 :focus 会生效。但默认情况下，鼠标点击后也会触发 :focus，导致点完按钮还留着焦点框。
现代做法是用 :focus-visible 替代 :focus，它只在键盘导航时激活：
button:focus-visible {
outline: 2px solid #007bff;
}- 不要删掉所有 focus 样式——这会让屏幕阅读器和键盘用户完全迷失当前焦点位置
-
:focus-visible在 Safari 中需加前缀:-webkit-focus-visible才生效 - 如果按钮带图标，建议同时设置
outline-offset: 2px避免轮廓遮挡内容
长按、连点、快速切换时颜色异常？检查事件冒泡和 CSS 过渡
加了 transition 后，有时点太快会出现颜色“卡住”或“跳变”，本质是过渡动画没完成就被新状态打断。
- 给 transition 加上明确属性，比如
transition: background-color 0.2s ease，而不是笼统写transition: all .2s - 如果按钮嵌套在
<label></label>或有父元素监听click，可能触发多次事件，导致 class 切换错乱，加event.stopPropagation()或用pointer-events: none临时禁用 - 安卓 WebView 中，
:active有时持续过久（尤其配合transition），可加* { -webkit-tap-highlight-color: transparent; }消除高亮干扰
CSS 伪类本身不记录状态，也不响应松手后的逻辑。真正稳定的点击变色，永远是 CSS + JS 的组合：伪类管“按下瞬间”，JS 管“状态持久”，而焦点样式管“谁当前被操作”。漏掉任意一环，都会在某个设备或交互路径下出问题。
