怎么用 :hover :focus 这些伪类配合 CSS 变量改颜色
直接改伪类里的 color 或 background-color 当然可以，但一旦状态多（比如 :hover、:focus、:active、:disabled），又想统一换主题色，硬写四遍颜色值就容易漏改、难维护。
正确做法是把颜色抽成变量，在伪类里只覆盖变量值：
:root {
--btn-bg: #007bff;
--btn-bg-hover: #0056b3;
--btn-bg-active: #004085;
}
<p>.btn {
background-color: var(--btn-bg);
}</p><p>.btn:hover {
--btn-bg: var(--btn-bg-hover);
}</p><p>.btn:active {
--btn-bg: var(--btn-bg-active);
}</p><p>.btn:disabled {
--btn-bg: #6c757d;
}注意：:disabled 不能用 var() 覆盖变量再读取，因为禁用态通常要彻底脱离主题逻辑，直接赋值更稳妥。
:disabled 状态下变量不生效？为什么
CSS 变量继承和计算发生在元素渲染前，而 :disabled 是一个“不可交互”标记，浏览器会跳过对它的部分样式计算——尤其是当它出现在变量链下游时。常见错误是这么写：
立即学习“前端免费学习笔记（深入）”；
.btn:disabled {
--btn-bg: #999;
background-color: var(--btn-bg); /* 可能还是旧值 */
}原因：某些浏览器（特别是旧版 Safari）在 :disabled 下不重新计算 var() 引用，导致 fallback 失效。
- 安全写法是直接在
:disabled里写死颜色，不依赖变量链 - 如果必须复用变量逻辑，改用
opacity+pointer-events: none模拟禁用态，绕过原生:disabled的限制 - 检查是否用了
!important干扰了变量级联，CSS 变量本身不支持!important
变量名怎么起才不容易混乱
状态变量不是越多越好，关键是和组件生命周期对得上。比如按钮颜色，别叫 --primary-color-hover，这跟谁的 primary 有关？换成语义化命名：
-
--control-bg-idle（默认态） -
--control-bg-hover（悬停） -
--control-bg-pressed（按下） -
--control-bg-disabled（禁用）
这样所有带交互的控件（按钮、开关、输入框）都能共用同一套变量前缀，后期加 dark-mode 只需重定义 :root[data-theme="dark"] 下的这几个值，不用翻代码找散落各处的 #333。
伪类嵌套顺序影响颜色表现吗
影响很大。CSS 是从上到下匹配，后声明的规则会覆盖前面同权重的规则。比如：
.btn:focus { --btn-bg: #007bff; }
.btn:hover { --btn-bg: #0056b3; }当用户既悬停又聚焦时（比如用键盘 tab 进去再鼠标移入），:hover 规则在后面，就会生效——但实际体验中，你可能希望 :focus 优先（尤其对可访问性）。所以顺序要按「状态叠加优先级」排：
- 先写
:disabled（最高优先级，完全独立） - 再写
:active（按下瞬间，应覆盖 hover/focus） - 然后是
:focus和:hover，谁更重要就放后面 - 避免写
.btn:hover:focus这种复合伪类——兼容性差，且 Chrome/Firefox 对其触发逻辑不一致
复杂交互组件的状态切换边界很细，变量只是工具，真正决定颜色的是你写的那几行规则的顺序和 specificity。
