css函数定义变量吗 |css 提升权重

CSS函数定义变量 CSS（层叠样式表）中的变量可以让您在整个样式表中重复使用相同的值，他们是一种CSS的扩展。但是，CSS变量的值是不可更改的，一旦定义，只能在整个样式表中使用相同的值。 CSS变量定义使用var()函数定义。这样，大家可以在需要使用值的地方调用此函数。 下面是变量在css中的使用，这个例子中大家定义了一个颜色变量：

:root {
--mainColor: #32a1ff;
}
p {
color: var(--mainColor);
}

使用变量来指定颜色时，“var()”函数用于调用大家在“:root”选择器中定义的变量“–mainColor”。 您可以在样式表的任何地方使用“:root”伪类选择器，它表示文档的根元素。 变量作用域 让大家看一下变量的作用域。CSS变量是有效的在定义它们的块（被大括号包含的CSS代码块）中以及在这些块的子块中。 在这个例子中,大家定义了两个变量，其中一个定义在“:root”中，另一个定义在一个类选择器中：

:root {
--mainColor: #32a1ff;
}
.my-class {
--secondaryColor: #000000;
background-color: var(--secondaryColor);
}
p {
color: var(--mainColor);
background-color: var(--secondaryColor);
}

在这个例子中，“background-color”属性使用“–secondaryColor”变量定义。 这个变量在“.my-class”选择器中定义。 可以应用“–secondaryColor”变量的选择器包括其定义范围之内定义的所有选择器（如上面的“.my-class”），以及所有包含“–secondaryColor”定义范围的选择器（如上面的“p”选择器）。 变量优先级 当一个元素定义使用多个变量的属性时 ，哪一个变量优先级更高呢？ CSS的规则是在同一个作用域内从元素实例开始向外查找，查找是否定义了一个给定的变量。 最近的定义优先级最高，并且直接在定义变量的选择器中定义的变量优先级高于其他选择器中定义的变量。 最后，还有一个在“var()”函数内可以使用的可选参数，表示如果遇到未定义的CSS变量，应使用的默认值。