CSS 覆盖变量
使用局部变量覆盖全局变量
从上一页我们了解到，全局变量可以通过整个文档访问/使用，而局部变量只能在声明它的选择器内使用。
看一下上一页的示例：
例子
：根 {
--蓝色：#1e90ff；
--白色：#ffffff；
}
身体 {
背景颜色：var（--blue）；
}
h2 {
底部边框：2px 实线 var(--blue)；
}
。容器 {
颜色：var（--蓝色）；
背景颜色：var（--white）；
填充：15px；
}
按钮 {
背景颜色：var（--white）；
颜色：var（--蓝色）；
边框：1px 实线 var(--blue)；
填充：5px；
}
亲自尝试 »
有时我们希望变量仅在页面的特定部分发生变化。
假设我们想为按钮元素添加不同的蓝色。那么，我们可以在按钮选择器中重新声明 --blue 变量。当我们在此选择器中使用 var(--blue) 时，它将使用此处声明的本地 --blue 变量值。
我们看到本地 --blue 变量将覆盖按钮元素的全局 --blue 变量：
例子
：根 {
--蓝色：#1e90ff；
--白色：#fff；
}
身体 {
背景颜色：var（--blue）；
}
h2 {
底部边框：2px 实线 var(--blue)；
}
。容器 {
颜色：var（--蓝色）；
背景颜色：var（--white）；
填充：15px；
}
按钮 {
--blue: #0000ff; /* 局部变量将覆盖全局变量 */
背景颜色：var（--white）；
颜色：var（--蓝色）；
边框：1px 实线 var(--blue)；
填充：5px；
}
亲自尝试 »
添加新的局部变量
如果一个变量仅在一个地方使用，我们也可以声明一个新的局部变量，如下所示：
例子
：根 {
--蓝色：#1e90ff；
--白色：#fff；
}
身体 {
背景颜色：var（--blue）；
}
h2 {
底部边框：2px 实线 var(--blue)；
}
。容器 {
颜色：var（--蓝色）；
背景颜色：var（--white）；
填充：15px；
}
按钮 {
--button-blue: #0000ff; /* 新的局部变量 */
背景颜色：var（--white）；
颜色：var（--button-blue）；
边框：1px 实线 var(--button-blue)；
填充：5px；
}
亲自尝试 »
浏览器支持
表中的数字表示第一个完全支持 var() 功能。
| 功能 | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS var() 函数
| 财产 | 描述 |
|---|---|
| var() | 插入 CSS 变量的值 |
