大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
最近做项目,发现CSS变量一个有意思的特性,那就是变量作用域非全局。
举个例子,如下HTML和CSS:
测试a测试b测试c
.box { --color: red; color: var(--color); } .a { --color: green; color: var(--color); } .b { --color: blue; color: var(--color); } .c { --color: yellow; }
虽然整个CSS公用一个上下文文档,但是,对于CSS变量,却是有作用域概念的,变量只能作用于自身以及后代元素,兄弟元素,祖先元素都不能享用。
因此,这里最终的颜色是:绿、蓝和红。如下截图: