按钮状态颜色需按:hover、:active顺序书写以避免覆盖；:active瞬时生效，易被后置:hover规则覆盖；移动端需禁用tap高亮；color仅影响文字，整体变色需同步设background-color。
按钮不同状态的颜色怎么用 :hover 和 :active 控制
直接写就行，但顺序很重要：:hover 和 :active 必须放在 :link 和 :visited 之后（对 <a>），而对 <button> 来说，重点是伪类的层叠顺序。浏览器按 CSS 规则出现的先后决定最终样式，后写的会覆盖前面的——除非用更具体的优先级。
-
:hover在鼠标移入时触发，不是“悬停不动”才生效，只要指针在元素上就起作用 -
:active只在鼠标按下（或触屏按住）那一瞬间生效，松开立刻退出，持续时间极短 - 如果
:active样式没反应，大概率是被后续其他规则（比如:hover或全局button { color: ... }）覆盖了
为什么 :active 经常不生效
最常见原因是：你写了 button:hover { color: red; }，又写了 button:active { color: blue; }，但鼠标按下时 :hover 依然成立，而两个选择器权重相同，:hover 写在后面就赢了。
-
解决方法：把
:active放在:hover后面（顺序即优先级） - 或者提高
:active的特异性，比如写成button:focus:active或button.my-btn:active - 移动端还要注意：iOS Safari 默认会给
:active加一层灰色背景，可能掩盖你的颜色设置，加-webkit-tap-highlight-color: transparent;可禁用
button {
color: #333;
}
button:hover {
color: #007bff;
}
button:active {
color: #dc3545; /* 必须放 hover 后面，否则被覆盖 */
}
button:active:focus {
outline: none; /* 避免点击时双焦点干扰 */
}
color 属性和按钮文字颜色的实际表现
color 只控制文字（及 border-color、outline-color 等继承色），不会影响背景。如果你希望“按钮整体变色”，通常得同时设 background-color 和 color，否则只改文字可能看不出来。
-
button元素默认有 UA 样式（如 Chrome 的浅灰背景），光改color不足以体现状态变化 - 使用
currentColor是个技巧：比如border: 1px solid currentColor;，这样改color就能联动边框色 - 别依赖
button[disabled]的color自动变灰——各浏览器 UA 样式不一致，显式写button:disabled { color: #6c757d; }更可靠
要不要用 :focus？它和 :active 有什么区别
:focus 表示键盘聚焦（Tab 进入）或 JS 主动调用 .focus()，和鼠标按下无关；:active 是瞬时交互态。两者不互斥——点击一个可聚焦按钮时，:active 和 :focus 会同时存在一小段时间。
立即学习“前端免费学习笔记（深入）”；
- 可访问性要求：必须提供
:focus样式，否则键盘用户看不到当前焦点在哪 - 避免只写
button:focus { outline: none; }却不提供替代焦点指示（比如加box-shadow），这属于 WCAG 违规 - 想让“点击后保持高亮”？
:active做不到——它不是状态，而是瞬时伪类。需要 JS 切换 class 或用:checked（配合隐藏 checkbox + label）
真正在意状态反馈的话，别只靠伪类堆砌；复杂交互建议用 class 控制（比如 is-pressed、is-disabled），伪类只做轻量提示。毕竟 :active 的时间窗口太窄，人眼几乎捕捉不到——你看到的“效果”，往往其实是 :hover 或焦点残留。
