【ES三周年】一文弄懂css权重 - 世界能源网

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

2023-04-15 17:40:09 来源：腾讯云

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

这时候就需要了解权重（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，因为并不是直接选中了该标签

关键词：

推荐内容

产业

游客因未购物遭导游辱骂？九寨沟：相关部门已介入调查

2021-10-20

油气

1

知识百科 e1是什么意思

2

百科深圳市宝安区财政局电话

3

河北深州警方打掉一暴力催债团伙 36名嫌犯被刑拘

4

寒潮降温破冰点如何保障温暖过冬？探访北京城管及供热

5

莆田致2死3伤案嫌犯拒捕并畏罪自杀经抢救无效死亡

6

福建福州一在建摩天轮发生垮塌事故原因正在调查中

7

为什么对张恒处3227万元罚款？其违法事实有哪些？

8

山西民政部门支出超2亿元捐款保障受灾困难民众基本生活

9

张恒被税务部门依法处以3227万元罚款

10

湖北赛武当国家级自然保护区监测到珍稀动物

经济

网络百科全书生平什么意思

1、生平释义：一个人生活的整个过程;一辈子。有生以来;平生。2、出自：清吴趼人《二十年目睹之怪现状》第二二回：那天凭空受了伯述的一席话

浙江杭州西湖首次推“环湖游线” 重现灵隐天竺上香水路

　　中新网杭州10月18日电 (王题题胡燕婕)云天收夏色，浅秋正渐浓。10月18日，浙江杭州市西湖游船有限公司推出的惠民多站点“西湖环湖游

税务机关处罚一名艺人经纪人

　　中国税务机关处罚一名艺人经纪人　　中新社北京10月18日电 (记者赵建华)上海市税务局第一稽查局前期在艺人郑爽偷逃税案件检查过程中

福建福州在建摩天轮事故续：安装过程中外围轮毂脱落无

　　中新网福州10月18日电 (记者龙敏王东明)福州市晋安区官方18日晚间通报，18日14时47分，晋安区岳峰镇化工路爱摩轮商业广场项目摩天

【母亲河畔的中国】黄河“润泽”甘肃：沿岸城市兴文旅

　　中新网兰州10月18日电 (闫姣艾庆龙吉翔)“红山白土头，黄河向西流。”不少人疑问，天下黄河向东流，为何甘肃永靖县这段黄河却向西