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）