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

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

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

标签:

最近更新

【ES三周年】一文弄懂css权重
2023-04-13 16:30:18
浙江省衢州市发布暴雨黄色预警|讯息
2023-04-13 15:59:29
四川一男子骑鸵鸟上马路:你们有奔驰宝马,我有360度全天窗座驾
2023-04-13 14:53:38
糖炒栗子不熟可以吃吗?
2023-04-13 13:47:11
全球资讯:周四(4月13日)COMEX黄金最新库存量数据
2023-04-13 12:51:45
全球短讯!2023年校友会中国民办大学排名(I类)20强
2023-04-13 11:46:16
国内最大接入增量配网光伏项目并网
2023-04-13 10:50:35
边境如何下载?边境下载一站式最方便快捷方法
2023-04-13 10:20:19
河源出台“金融19条”支持经济高质量发展
2023-04-13 08:53:51
安切洛蒂社媒:我们已迈出晋级的第一步,次回合要延续表现|环球看热讯
2023-04-13 07:30:03
家庭布线 磊科5口千兆交换机29元|天天亮点
2023-04-13 06:08:23
Shams:特雷-杨和斯奈德关系稳固 相互尊重
2023-04-13 02:31:57
焦点日报:郎咸平六任妻子是谁-郎咸平六任妻子照片
2023-04-12 22:37:26
每日热讯!王导:黄金2019直接多,目标2035
2023-04-12 21:08:38
首创环保:拟公开发行不超过20亿元公司债券
2023-04-12 19:57:35
英特尔 CEO:对中国市场非常乐观 看到了中国的增长活力
2023-04-12 18:57:05
异化之恶(错过的约定) 全球热议
2023-04-12 18:10:50
丫丫将由美国联邦快递直接送至上海 近日运送回国
2023-04-12 17:16:42
报了自考的高升专的考试 在学易分期分的贷款 第一个月的没下来-每日热议
2023-04-12 16:31:17
环球视点!医疗跑出“加速度” 张家界市永定区全力推进卫生健康事业高质量发展
2023-04-12 15:44:28
四年级下册第24课黄继光生字词-全球今日报
2023-04-12 14:52:29
信用卡分期年化利率怎么算呢?网贷逾期怎么办? 天天微头条
2023-04-12 13:55:05
贵州已建成投运24个“老吾老驿站” 累计服务12.68万人次
2023-04-12 12:17:50
三公里走路多少分钟(跑三公里需要多长时间上文)
2023-04-12 11:33:01
调好的酱怎么保鲜存放 自家做的大酱怎么保存
2023-04-12 10:51:47
夏河:做好“牛文章” 做强“牛产业” 助力农牧民过上“牛”日子
2023-04-12 10:08:17
今日聚焦!横河精密4月12日快速回调
2023-04-12 09:21:00
世界报道:宣传“超高附赠”实则教你“偷面积”
2023-04-12 08:41:27
【创意海报】AI绘出未来太空探索愿景 天天速递
2023-04-12 07:12:06
海贼王伟大航路“三大势力”失去平衡,路飞竟隐藏海军大将的实力 焦点热门
2023-04-12 05:42:36