【ES三周年】一文弄懂css权重

首页>资讯 > 正文
2023-04-14 20:30:42

来源:腾讯云

对于初学者来说,在修改网页样式时可能偶尔会有这个疑问:为什么我添加了样式但不生效呢?

这时候就需要了解权重(weight)相关知识了

css的权重判断一般来说有四类

important(最优先)和行内样式(次优先)ICE权重值(后文说明)最基础的一条,就是选择器匹配,简单来说就是css代码对应的html元素先后顺序(后写的覆盖先写的)

这里的顺序类似css的判断顺序,即第一点如果不符,那就顺延第二点,都不符合,那就按最后的先后顺序兜底


(资料图)

其他几条比较好理解,本文着重讲讲【ICE权重】

什么是【ICE】呢?听起来高大上,其实只是ID,Class,Element的缩写罢了,即id选择器,class选择器和html元素,按照ICE的顺序来算,也就是说

id > class > html

怎么计算呢?凡是元素有被对应选择器选择到,就在对应位数上+1,比如说一个html元素有两个class名,那么权重就是0-2-0

注意,权重是相对【一段css代码】,而不是相对元素

比如

这种情况,id,class和元素选择器互相有重复的属性,那么虽然对象是同一个元素,但这个元素【没有】权重值的概念

没有说元素的权重是1-1-1,而是第一个段css代码权重0-0-1,第二段0-1-0,第三段1-0-0,那么根据规则,自然是1-0-0最大,所以颜色值为#f00cec

第二个注意点,不要简单认为ICE是三位数,他们每一位都是【独立】计算的

简单来说就是“官大一级压死人”,即便0-0-11(如果按位数算是11),也大不过0-1-0,当然,很少会出现这种场景,了解即可

第三个注意点:如果权重刚好相等怎么办?其实可以直接根据上述四点来判断,可以得出答案是顺序

即【后面的覆盖前面的】

第四个注意点:继承的样式【没有】权重,这个简单理解即可

例如body标签有个font-size设置字体大小为16px,那么body标签的子元素(例如有个p标签),也会继承16px的样式,但是这段代码的权重和该标签其他的权重比较时算作0-0-0,因为并不是直接选中了该标签

标签:

THE END
免责声明:本文系转载,版权归原作者所有;旨在传递信息,不代表热讯制鞋网的观点和立场。

相关热点

新华社电 上海市文化和旅游局近日发布《上海市密室剧本杀内容备案管理规定(征求意见稿)》,并截至12月8日面向社会公众广泛征求意见。这
2021-11-19 13:46:03
《中国证券报》17日刊发文章《备战2022 基金经理调仓换股布新局》。文章称,距离2021年结束仅剩一个多月,基金业绩分化明显。部分排名靠前
2021-11-19 13:46:03
交通运输部办公厅 中国人民银行办公厅 中国银行保险监督管理委员会办公厅关于进一步做好货车ETC发行服务有关工作的通知各省、自治区、直
2021-11-19 13:45:58
新华社北京11月17日电 题:从10月份市场供需积极变化看中国经济韧性新华社记者魏玉坤、丁乐读懂中国经济,一个直观的视角就是市场供需两端
2021-11-19 13:45:58
全国教育财务工作会议披露的消息称,2020年,中国国家财政性教育经费投入达4 29万亿元,占GDP总量的4 206%,我国国家财政性教育经费支出占G
2021-11-19 13:45:48
如果你也热爱“种草”,前方高能预警!让你心心念念、“浏览”忘返的网络平台,可能早已成为一块块“韭菜地”。近日,据《半月谈》报道,有...
2021-11-19 13:45:48
日前,工业和信息化部印发《“十四五”信息通信行业发展规划》(以下简称《规划》),描绘了未来5年信息通信行业的发展趋势。《规划》指出...
2021-11-19 13:45:40
本报讯(中青报·中青网记者 周围围)2021年快递业务旺季正式拉开帷幕。国家邮政局监测数据显示,仅11月1日当日,全国共揽收快递包裹5 69
2021-11-19 13:45:40
人民网曼谷11月17日电 (记者赵益普)17日上午,中国援柬埔寨第七批200万剂科兴新冠疫苗抵达金边国际机场。当天,柬埔寨政府在机场举行了
2021-11-19 13:45:35
金坛压缩空气储能国家试验示范项目主体工程一角受访者供图依托清华大学非补燃压缩空气储能技术,金坛压缩空气储能项目申请专利百余项,建立
2021-11-19 13:45:35
视觉中国供图42亿立方米据有关部门预计,今年山西煤炭产量有望突破12亿吨,12月份山西外送电能力将超过900万千瓦,今冬明春煤层气产量将达4
2021-11-19 13:44:34
14省份相继发布2021年企业工资指导线——引导企业合理提高职工工资今年以来,天津、新疆、内蒙古、陕西、西藏、山东、江西、山西、福建、四
2021-11-19 13:44:34
中新网客户端北京11月18日电 (记者 谢艺观)“一条路海角天涯,两颗心相依相伴,风吹不走誓言,雨打不湿浪漫,意济苍生苦与痛,情牵天下喜
2021-11-19 13:44:31
近日,交通运输部等三部门发布《关于进一步做好货车ETC发行服务有关工作的通知》。通知提到,对不具备授信条件的用户,商业银行可在依法合
2021-11-19 13:44:31
欧莱雅面膜陷优惠“年度最大”风波 涉及该事件集体投诉超6000人次美妆大牌双十一促销翻车?近日,因预售价格比双十一现货贵出66%,欧莱雅
2021-11-19 13:44:13
43 6%受访者会在工作两三年后考虑跳槽54 3%受访者认为跳槽对个人职业发展有利有弊如今对不少年轻人来说,想对一份工作“从一而终”不太容易
2021-11-19 13:44:13
超八成受访青年表示如有机会愿意开展副业 规划能力最重要64 4%受访青年指出做副业跟风心态最要不得如今,“身兼数职”已成为年轻人当中的
2021-11-19 13:44:01
发展氢能正当其时【科学随笔】氢能是一种二次能源,它通过一定的方法利用其他能源制取,具有清洁无污染、可储存、与多种能源便捷转换等优点
2021-11-19 13:44:01
“千杯不醉”的解酒“神药”能信吗?专家:网红“解酒药” 其实不算药俗话说,“酒逢知己千杯少”,酒一直是国人饭桌上至关重要的存在。尽...
2021-11-19 13:43:57
最新文章

相关推荐