【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,因为并不是直接选中了该标签
关键词:
为您推荐
-
2023沈阳皇姑半马报名条件与要求年龄要求:1、参加半程马拉松限18周岁以上至65周岁以下;2、参加欢乐跑限6周岁以上至65周岁以下;3、未成年参赛
23-04-17
-
4月14日,据中国人民银行消息,央行货币政策委员会召开2023年第一季度例会,会议指出,当前国际经济增长放缓,通胀仍处高
23-04-17
-
作为“史上规模最大”的一届广交会,本届广交会全面恢复线下展,于4月15日至5月5日分三期举办,同时全年常态化运营线上平台。本届广交会展览面
23-04-17
-
据说将要在9月份发布的全新的iPhone15系列,会带来很多惊喜。该系列依旧包含了四个版本:iPhone15、iPhone15PIus、iP
23-04-16
-
本次参与转融通证券出借业务的原因,为使资产保值增值,提高资产运作效率,广州产投拟参与转融通证券出借业务。
23-04-16
-
1、1、细跟高跟鞋适合腿部比较纤细的女生来穿。2、2、高跟鞋确实能给漂亮女孩以锦上添花。穿高跟鞋就是增高,这是一个很直接
23-04-16
-
今天小编肥嘟来为大家解答以上的问题。烟名字,烟名相信很多小伙伴还不知道,现在让我们一起来看看吧!1、Marlboro(万路宝)Moore(摩尔)Davidoff
23-04-16
-
4月16日上午9时30分,武汉马拉松半程终点处已有不少完赛跑者,领取奖牌,合影留念,抱着亲人朋友送来的鲜花。身着“同济大
23-04-16
-
全球最大的瓦斯发电厂——寺河瓦斯发电厂(资料图片)。3月24日10时,晋能控股电力集团清洁能源公司吕梁交口200兆瓦光伏发电项目并网。该项目
23-04-16
-
文 羊城晚报全媒体记者冷霜通讯员赤坭宣广州,花城。一直以来,广州背靠粤港澳大湾区,是中国对外开放的“南大门”。“千年商都”的广州,蕴含
23-04-16
-
2023亚洲摔跤锦标赛14日在哈萨克斯坦首都阿斯塔纳展开最后一个比赛日的较量,中国队选手刘明瑚和佈和额尔敦分获男子自由式
23-04-15
-
近日有网友爆料称,上海地铁上一白发老人疑似强制让一女子让座。对此,上海地铁有关负责人呼吁文明乘车,友爱礼让。记者陈逸欣巩汉语编辑孙骏(
23-04-15
-
作者:包寒吴霜的个人主页精选文章管理世界|使用文本分析词构建并测量短视主义管理世界|使用经营讨论与分析测量企业数字化指标管理世界|用正则
23-04-15
-
记者刘一诺通讯员马睿2023年4月15日是第八个全民国家安全教育日,今年的主题是“贯彻总体国家安全观,增强全民国家
23-04-15
-
疫情曲终,为期一周的2023年日内瓦“钟表与奇迹”高级钟表展(Watches&WondersGeneva,下称“WWG”)终于再次迎来全球钟表业人士。疫情洗礼后的W
23-04-15
-
据证券之星公开数据整理,近期诚志股份(000990)发布2023年一季报。根据财报显示,本报告期中诚志股份增收不增利,商誉占比过高。截至本报告
23-04-15