css - 为什么 body CSS 变量不覆盖根中定义的变量?
问题描述
这个问题本身是不言自明的。我有以下代码:
:root {
--brand-color: blueviolet;
--button-background-color: var(--brand-color);
}
body {
--brand-color: blue;
}
button {
background-color: var(--button-background-color);
border: none;
color: #fff;
border-radius: 4px;
padding: 4px 10px;
}
<html>
<body>
<button>Button</button>
</body>
</html>
在body {...}
选择器中,我已经覆盖了--brand-color
变量。按钮在正文中,但按钮的背景颜色仍设置为--brand-color
根中定义的颜色。我知道这是 CSS 变量的默认行为,但有人可以向我解释为什么会发生这种情况以及在这里覆盖变量的正确方法是什么?前提是,我不想在button {...}
选择器中覆盖它。
解决方案
这是正在发生的事情:
--brand-color
被设定为blueviolet
--button-background-color
设置为--brand-color
(不是对变量的引用)的当前值--brand-color
值设置为blue
由于--button-background-color
从不重置,因此它保持原始值。
您可以直接使用品牌颜色,它会具有正确的价值。
button {
background-color: var(--brand-color);
...
}
推荐阅读
- angular - 使用 IE11 运行 Angular 11 应用程序
- c# - 如何有效地从 Stream 动态加载多个图像?
- postgresql - 如何将数据库从 Odoo Online 移动到我服务器上的 Odoo 14?
- sql - 根据字段名称计算两个值的总和
- reactjs - 在将 react 应用程序作为静态内容重新部署到 gcloud 存储时获取意外的 Tokken '<'
- python - Pandas 读取 csv 格式错误
- vba - 如何从自定义标志中提取文本
- c# - 使用 nuget 包而不发布
- javascript - ckeditor:检测上传已完成
- reactjs - DOM 始终是每隔一个页面中的 App 页面 React + Ionic + Typescript