按钮没变色是因为框架未将--btn-color用于背景色，而是用--bs-btn-bg等专用变量；:hover不生效因选择器权重不足或兼容性差；暗色/禁用态需分别作用于@media和:disabled；变量必须被css规则显式引用才生效。
直接改 --btn-color 为什么按钮没变色
因为大多数框架（比如 Bootstrap 5+、Vant）并不用 --btn-color 控制背景或边框，它默认只管文字色。你改了变量，但按钮的 background-color 还是写死的 #007bff 或引用了别的变量（如 --bs-btn-bg）。
检查方式很简单：打开开发者工具，选中按钮，看 background-color 最终来源是不是 var(--bs-btn-bg) —— 如果是 #007bff 这类硬编码值，那变量就完全没参与计算。
实操建议：
• 查文档确认框架实际使用的变量名（Bootstrap 是 --bs-btn-bg，Vant 是 --button-primary-color，Tailwind 不暴露该变量）
• 不要自己定义 --btn-color 后就指望全局生效，得同步改引用它的 CSS 规则
• 若框架不支持，就手动接管：给 .btn 显式写 background-color: var(--my-btn-bg)
:root 里设变量，:hover 状态却不生效
伪类里修改 CSS 变量本身是合法的，但浏览器兼容性差：IE 完全不支持，旧版 Safari 表现不稳定。更常见的是权重问题——框架的 .btn-primary:hover 选择器优先级远高于你写的 button:hover，导致你的 var(--btn-hover-bg) 被覆盖。
实操建议：
• 避免在 :hover 中动态改变量值，改用独立变量（如 --btn-hover-bg），并在对应状态里直接调用
• 复制框架的选择器结构，比如 Bootstrap 就写 .btn.btn-primary:hover { background-color: var(--bs-btn-hover-bg); }
• Tailwind 用户别依赖 hover:bg-blue-600 类去覆盖变量，它本质是生成静态样式，和变量无关
一套变量怎么同时适配亮色/暗色模式 + 禁用态
亮色/暗色模式靠 @media (prefers-color-scheme: dark) 切换，禁用态靠 :disabled 伪类，二者作用域不同：前者是全局主题，后者是单个元素状态。混在一起设会冲突——比如你在 :root 里设了暗色模式下的 --btn-bg，但某个按钮同时 :disabled，它的背景色可能既不是亮色值也不是暗色值，而是被框架 fallback 到灰色。
实操建议：
• 暗色模式变量统一在 @media (prefers-color-scheme: dark) { :root { --btn-bg: #1e293b; } } 里重置
• 禁用态单独写：button:disabled { --btn-bg: #cbd5e1; color: #64748b; }，不要指望它自动继承暗色模式变量
• Vant 等组件库有专用禁用变量（如 --button-disabled-opacity），优先用它们
为什么改了变量，按钮圆角/尺寸/阴影还是不变
CSS 变量只负责“值”，不负责“属性绑定”。你设了 --btn-radius: 8px，但如果按钮样式里没写 border-radius: var(--btn-radius)，那它就只是个未被消费的字符串。很多框架把圆角、内边距、阴影都写死在 class 里（比如 Bootstrap 的 .btn 直接声明 border-radius: 0.375rem），根本没接入变量体系。
实操建议：
• Tailwind 用户走 theme.extend.borderRadius 配置语义化值（如 'btn': '8px'），再用 rounded-btn 类
• Bootstrap 5 用户必须改 SCSS 变量（$btn-border-radius）并重新编译，CSS 变量对这类属性无效
• 自定义按钮时，把所有可变属性（padding、border-radius、box-shadow）全部绑定变量，一个都不能漏
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
