用于计算父作用域中的变量时,CSS作用域自定义属性无法识别

文章编号:5818 技术教程 2023-11-03

扫码关注官方订阅号

20231102225948_16590.jpg" alt="用于计算父作用域中的时CSS作用域自定">

我正在尝试通过var自定义属性来缩放大小,以便类可以在不耦合的情况下组合。期望的效果是3个列表将具有3个不同的比例,但正如CodePen上所示,所有3个列表的比例相同。我正在寻找范围界定和CSS自定义属性技术的解释,该技术可以通过可组合的松散耦合代码来实现此目的。

在您的情况下,您已在根级别评估了--scale自定义属性来定义--size-*属性,然后定义了--scale再次在子元素内。这不会再次触发评估,因为它已经在上层中完成。

下面是一个简单的例子来说明这个问题:

.scale{--size-1:calc(1*var(--scale,1)*1rem);--size-2:calc(2*var(--scale,1)*1rem);--size-3:calc(3*var(--scale,1)*1rem);}.size-1{font-size:var(--size-1)}.size-2{font-size:var(--size-2)}.size-3{font-size:var(--size-3)}.scale-1x{--scale:1}.scale-2x{--scale:2}.scale-3x{--scale:3}html{font:1emsans-serif;background:papayawhip;}ol{float:left;list-style:none;margin:1rem;}

在本例中,--scale的定义级别与其评估相同,因此将为每种情况正确定义--size-*

在第一种情况下,您会陷入3,因为在根级别没有为--scale指定值。在最后一种情况下,我们陷入了2,因为我们在同一级别定义了--scale并且我们有它的值。

在所有情况下,我们都应该避免在:root级别进行任何评估,因为它根本没有用。根级别是DOM中的最上层,因此所有元素都将继承相同的值,除非我们再次评估变量,否则DOM内不可能有不同的值。

您的代码相当于此代码:

:root{--size-1:calc(1*1*1rem);--size-2:calc(2*1*1rem);--size-3:calc(3*1*1rem);}


我们再举一个例子:

直观上,我们可能认为可以通过更改:root级别定义的3个变量之一来更改--color,但我们不能执行此操作以及上述操作代码与此相同:

3个变量(--r--g--b)在:root内求值code>因此我们已经用它们的值替换了它们。

在这种情况下,我们有3种可能性:

考虑到这一点,我们应该始终将评估保持在DOM树中尽可能最低的点,尤其是在变量更改之后(或在同一级别)

这是我们不应该做的事情

这是我们应该做的

我们还可以这样做:

微信扫码关注PHP中文网服务号

QQ扫码加入技术交流群

Copyright2014-2023AllRightsReserved|苏州跃动光标网络科技有限公司|


本文地址: https://www.gpxz.com/article/c62f13268d38c9829583.html
全局中部横幅
全局中部横幅
必应权重

必应权重API数据接口根据查询域名获取必应搜索引擎的权重、预估流量、关键词数等。

新乡市鹏锦特种电机有限公司

新乡市鹏锦特种电机有限公司是生产各类特种电机生产,销售、研发为一体的综合性企业,公司主营:变频振动电机、箱式激振器、变频辊道电机、辊道用变频调速电机、力矩三相异步电动机等产品多型号齐全,支持定制加工,欢迎来电洽谈。

迪拜世博会安徽活动日

2020迪拜世博会中国馆安徽活动日开幕式将于2021年12月6日15:30-17:00正式举办。本次活动由安徽省人民政府主办,围绕“‘皖’美科创惠及全球”主题,采取线上线下融合方式。届时安徽省领导、中国贸促会领导、中国驻阿联酋大使、阿联酋驻上海总领事馆总领事等嘉宾将以线上线下方式出席活动。 大美安徽,迎客天下。我们诚邀您通过线上观看本场直播,共同领略阿联酋的地域特色,身临其境地感受本届世博会与安徽文化的魅力。

科星汽车设备(珠海)有限公司

科星汽车设备(珠海)有限公司主要生产磁悬浮平衡机,免撬棍轮胎拆装机,车载平衡机,后倾式轮胎拆装机,轮胎拆装机,拆胎机,轮胎平衡机,充气装置,氮气机,四轮定位仪

千华网

鞍山新闻网是鞍山的新闻门户,拥有鞍山最大的新闻信息资源和生活服务网络。下设鞍山新闻,鞍山旅游,鞍山健康,鞍山教育,鞍山文化,鞍山商圈等频道。

北京画美医疗美容医院[官]

北京画美,是一家集专业塑美服务、研发及示范教学为一体的专业整形美容医院。医院毗邻三里屯国际商圈,雄踞东三环黄金地段,形成规模宏大,实力雄厚的专业医学整形美容医院。专注开展美容外科、美容无创科、美容皮肤科、美容私密科四大科室。

留求艺

留求艺是一个专业的出国留学咨询网站,出国留学中介,留学中介费用,留学申请,出国留学咨询机构。提供美国、英国、日本、加拿大、澳大利亚、新加坡、新西兰、香港、马来西亚等留学咨询以及雅思、托福考试辅导。还提供海外移民、海外投资、签证等内容。出国就上留求艺!

深圳市光湖科技有限公司

深圳市光湖科技有限公司创立于2012年,是一家致力于光通信与光传感产品的开发与应用的高科技公司,在特种光器件,宽带光源,激光光源,光传感以及光纤到户的相关产品的模块和子系统方面为客户提供最优质的产品和技术服务

400电话选号网

400电话号码代理首选400电话选号网(www.4009.com),400电话网上营业厅,为各大企业提供优质的400号码以及400电话办理服务。全国400电话申请热线:400-900-8666。

全局底部横幅