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变量，却是有作用域概念的，变量只能作用于自身以及后代元素，兄弟元素，祖先元素都不能享用。

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

---

所以，如果你的变量是全局享用的，则建议放在:root上，例如：

:root {
    --color: red;
}