资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

强大的CSS:var变量的局部作用域(继承)特性-创新互联

一、CSS变量非全局

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

10年的灌阳网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。营销型网站的优势是能够根据用户设备显示端的尺寸不同,自动调整灌阳建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联建站从事“灌阳网站设计”,“灌阳网站推广”以来,每个客户项目都认真落实执行。

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

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

强大的CSS:var变量的局部作用域(继承)特性

分享文章:强大的CSS:var变量的局部作用域(继承)特性-创新互联
网页地址:http://cdkjz.cn/article/dsgesc.html
返回首页 了解更多建站资讯
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220