开篇
在上一篇中，我们深入研究了CSS选择器的伪类和伪元素，重点探讨了以下关键议题：
伪类选择器的应用；
伪元素选择器的灵活使用方法；
清晰阐述了伪类和伪元素选择器之间的差异；
随着学习的深入，我们将在本篇中探索CSS中另一个强大的特性 - 变量 var。通过深入了解CSS变量的应用和使用方法，我们将为你呈现CSS世界中更为多彩的一面。让我们开始这段关于CSS变量的学习之旅。
一，CSS 变量简介
CSS变量，又称为“CSS自定义属性”或“CSS级联变量”，是由CSS作者定义的。
通过声明CSS变量，可以更有效地抽取并统一管理重复的CSS属性值。
类似于其他编程语言中的变量，CSS变量也具有全局作用域和局部作用域。
使用CSS变量有助于提高代码的可读性，并赋予变量值更具语义化的标识。
这种灵活的变量定义方式为CSS样式的维护和修改提供了更为便捷的方式，让我们深入了解CSS变量的强大之处。
二，CSS 变量的运用
在CSS中声明变量，其属性名以两个减号（--）为前缀，属性值可以是任何有效的CSS值。通过以下步骤来使用CSS变量：
声明 CSS 变量： 在 :root 伪类中声明变量，例如 --main-bg-color: red;。
使用 CSS 变量： 在需要应用变量的地方，通过 var() 函数引用变量值。
例如：
这种灵活的变量定义和引用方式让CSS变得更为可维护和可读。需要注意的是，CSS变量的属性名对大小写敏感，而浏览器在遇到无效的 var() 时会使用继承值或初始值代替。
三，CSS 变量的范围
CSS 变量具有作用域的概念，分为全局和局部两种类型。
1. 全局作用域： 可以在整个文档中访问和使用。全局变量通过在 :root 选择器中声明，该选择器匹配文档的根元素。
例如：
这样声明的变量可以在整个文档的任何地方使用。
2. 局部作用域： 只能在被声明的选择器中使用。在需要使用变量的选择器内进行声明。
例如：
这样声明的变量 --background-color 只能在 .section 元素及其子元素中使用。
通过合理使用全局和局部作用域的变量，可以更好地控制样式的作用范围和可维护性。
四，CSS 变量的继承机制
CSS 变量在继承方面表现为受到级联的约束，会继承父元素的属性值。
如果在元素上没有为 CSS 变量设置值，那么将使用父元素上的值。
例如：
在这个情况下， var(--test) 的结果分别是：
对于元素 class="two"：10px；
对于元素 class="three"：2em；
对于元素 class="four"：10px（继承自父属性）；
对于元素 class="one"：非法值，取 CSS 变量的默认值；
需要注意的是，CSS 变量虽然会继承父元素的属性值，但它和 JavaScript 中的变量是有区别的。
五，CSS 变量的浏览器兼容性
Can I Use：CSS 变量 var 的浏览器兼容性
六，总结
本篇总结了 CSS 变量的相关知识，主要包括以下几个方面：
CSS 变量简介；
CSS 变量的使用；
CSS 变量的作用域；
CSS 变量的继承特性；
CSS 变量的浏览器兼容性；
在下一篇中，我们将开始探讨 CSS 布局的相关内容。
