css添加覆盖,CSS 覆盖变量

用局部变量覆盖全局变量

从上一页我们了解到，可以在整个文档中访问/使用全局变量，而局部变量只能在声明它的选择器内使用。

请看上一页中的例子：

实例

:root {

--blue: #1e90ff;

--white: #ffffff;

}

body {

background-color: var(--blue);

}

h2 {

border-bottom: 2px solid var(--blue);

}

.container {

color: var(--blue);

background-color: var(--white);

padding: 15px;

}

button {

background-color: var(--white);

color: var(--blue);

border: 1px solid var(--blue);

padding: 5px;

}

有时，我们希望变量仅在页面的特定部分中进行更改。

假设我们想要按钮元素使用不同的蓝色。那么，我们可以在 button 选择器内重新声明 --blue 变量。当我们在这个选择器中使用 var(--blue) 时，它将使用此处声明的局部 --blue 变量值。

我们看到局部的 --blue 变量会覆盖 button 元素的全局 --blue 变量：

实例

:root {

--blue: #1e90ff;

--white: #ffffff;

}

body {

background-color: var(--blue);

}

h2 {

border-bottom: 2px solid var(--blue);

}

.container {

color: var(--blue);

background-color: var(--white);

padding: 15px;

}

button {

--blue: #0000ff;

background-color: var(--white);

color: var(--blue);

border: 1px solid var(--blue);

padding: 5px;

}