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

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

猜你喜欢

AI推送时光机

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

后端开发2023-06-03

Golang函数中的变量作用域：局部变量和全局变量

后端开发2024-01-18

JavaScript局部变量与全局变量的作用域是什么

后端开发2024-04-02

从局部变量和全局变量开始全面解析Python中变量的作用域

后端开发2022-06-04

golang函数闭包和局部变量作用域的关系

后端开发2024-04-23

C语言入门篇--局部全局变量的作用域及生命周期

后端开发2024-04-02