【CSS 知识总结】第五篇 – CSS 变量 var

本文介绍: 伪类选择器；伪元素选择器；伪类和伪元素选择器的区别；本篇，介绍 CSS 变量 var；CSS 变量，由 CSS 作者定义，也被称作“CSS 自定义属性”或“CSS 级联变量”；通过声明 CSS 变量，抽取重复的 CSS 属性值，能够统一的进行维护和管理；和其他变量相似，CSS 变量也可以具有全局作用域和局部作用域；使用 CSS 变量，能够增强代码的可读性，也使变量值具备语义化标识；

上一篇，介绍了 CSS 选择器伪类和伪元素，主要涉及以下几个点：

本篇，介绍 CSS 变量 v ar；

&lt;!-- 声明 CSS 变量 --&gt;
:root {
  --main-bg-color: red;
}

&lt;!-- 使用 CSS 变量 --&gt;
.demo {
  color: white;
  background-color: var(--main-bg-color);
}

注意：

声明两个全局变量（–blue 和 –wh i t e），使用 v ar() 函数在样式表中插入变量的值：

如果在元素上没有为 CSS 变量设置值，那么将使用父元素上的值：

.two {
  --test: 10px;
}

.three {
  --test: 2em;
}

<div class="one">
  <div class="two">
    <div class="three"></div>
    <div class="four"></div>
  </div>
</div>