CSS变量的局部作用域特性demo实例页面

CSS代码：

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

HTML代码：

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