button:hover 和 :active 颜色切不干净是因为浏览器将二者视为独立状态，而实际交互中常叠加（如按住后移出），导致样式覆盖或回退异常；:focus 介入进一步加剧冲突。
button:hover 和 :active 为什么颜色切不干净
因为浏览器默认会把 :hover 和 :active 当成独立状态，而真实交互中它们常叠加（比如鼠标按住再移出），导致颜色被意外覆盖或回退异常。更麻烦的是，:focus 在键盘操作时也会介入，三者没明确优先级就容易打架。
实操建议：
- 用
:focus-visible替代泛用的:focus，避免鼠标点击后意外触发焦点色 - 把
:active样式写在:hover后面，确保按下时颜色不被 hover 覆盖 - 给所有交互态加
transition: background-color 0.15s ease，否则颜色跳变明显，用户感知“卡顿”
怎么让按钮同时响应鼠标、键盘、触摸三种输入
CSS 伪类本身不区分输入方式，但不同设备对 :hover 的触发逻辑差异极大：桌面端悬停即生效，移动端多数浏览器压根不触发 :hover（除非模拟），而触摸屏长按可能误触发 :active。
实操建议：
- 用
@media (hover: hover) and (pointer: fine)包裹纯 hover 效果，避免污染触屏体验 - 对触摸设备，靠
:active+touch-action: manipulation保证响应及时 - 键盘操作必须依赖
:focus-visible，且确保按钮有tabindex="0"（原生<button></button>默认支持）
多色状态里 :disabled 为什么总显得灰得不一致
不是颜色值写错了，而是 :disabled 会强制忽略部分样式继承（比如 background-blend-mode、某些 filter），还可能被浏览器 UA 样式里的 opacity 或 filter: grayscale() 覆盖。
实操建议：
- 显式重置
opacity: 1和filter: none，再设背景色和文字色 - 避免用
rgba()模拟禁用态，直接写background-color: #ccc+color: #666更可控 - 如果用了 CSS 变量控制主题色，禁用态务必单独定义变量，比如
--btn-disabled-bg: #e0e0e0，别复用--btn-primary-bg
伪类分层时 class 和伪类谁优先级更高
class 的权重是 0,1,0,0，单个伪类如 :hover 是 0,1,0,0，两者相等——这时候谁写在后面谁生效。但 :is(:hover, :active) 这种函数式伪类，权重按里面最高那个算，反而可能低于一个普通 class。
实操建议：
- 不要依赖
:is()或:where()做状态覆盖，它们会重置优先级，导致颜色失效 - 想让某个 class 强制生效？加
!important是下策；更稳的是用两个 class：btn btn--primary控制基础色，btn--primary:hover控制悬停色 - 用
data-state="disabled"配合属性选择器[data-state="disabled"]，权重和 class 相同，还能绕过伪类兼容性问题
真正难的不是写几个颜色，而是搞清每个伪类在什么设备、什么交互路径下会被触发，以及它会不会偷偷吃掉你写的其他样式。浏览器不会告诉你它内部怎么合并这些状态，只能靠真机+开发者工具反复点按观察渲染树变化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
