强大的CSS：var变量的局部作用域（继承）特性

一、CSS变量非全局

最近做项目，发现CSS变量一个有意思的特性，那就是变量作用域非全局。

举个例子，如下html和CSS：

<div class="box">    <div class="a">测试a</div>    <div class="b">测试b</div>    <div class="c">测试c</div></div>

.box {    --color: red;    color: var(--color);}.a {    --color: green;    color: var(--color);}.b {    --color: blue;    color: var(--color);}.c {    --color: yellow;}

虽然整个CSS公用一个上下文文档，但是，对于CSS变量，却是有作用域概念的，变量只能作用于自身以及后代元素，兄弟元素，祖先元素都不能享用。

因此，这里最终的颜色是：绿、蓝和红。如下截图：