对于初学者来说,在修改网页样式时可能偶尔会有这个疑问:为什么我添加了样式但不生效呢?
这时候就需要了解权重(weight)相关知识了
css的权重判断一般来说有四类
(资料图片)
这里的顺序类似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,因为并不是直接选中了该标签
上一篇:贵州水城:用数字书写“民生答卷”
下一篇:最后一页
X 关闭
-
全球聚焦:“全险”渐覆盖产粮大县 去年1.7亿户次农户受益
核心阅读农业保险是分散农业生产经营风险的重要手段。今年中央一号文件提出,“逐步扩大稻谷小麦玉米完全成
-
每日视点!sence怎么读_sence
1、sense的形容词形式:sensible2、Heissensibleofthedangerofhisp
-
时隔61天才复出!高效拿到17分,却错失绝杀三分球! 当前关注
时隔61天才复出!高效拿到17分,却错失绝杀三分球!,高效,勇士队,维金斯,汤普森,萨克拉门托国王队
-
世界资讯:银行向员工反向“讨薪”!招行追回超 5800 万元
已经拿到手的工资又被公司要回去,这样的事情你经历过吗?红星资本局注意到,近日,多家银行向员工反向讨薪
-
漫威凤凰女VS多玛姆谁更胜一筹,多玛姆:惹不起,惹不起 焦点讯息
她的能力和《X战警》系列电影中表现的差不多,有念力移物,心灵力量等能力,只是心灵力量琴·蕾就可以媲美X
-
100kWh电池开启预定,蔚来完成BaaS模式的商业闭环
汽车已经成了大多数人生活中必备的交通工具了,随着人们对汽车需求量的加大,汽车公司也多了起来。每天都有一
-
车展重磅来袭之:奇瑞瑞虎9 旗舰实力
奇瑞瑞虎9所在展馆:7 2号馆奇瑞瑞虎9整车基于全新一代设计语言“柔光美学”打造而来,相比奇瑞品牌以往的
-
心密 即时看
1、心密之所以有六个手印,因每个手印作用不同。2、故法众生有缘能修此大法,不知乃多劫所修善根之所感召也
-
环球今头条!上海发布雷电黄色预警,预计6小时内本市大部地区将发生雷电活动
防御指南:1、停止在空旷的地方开展户外活动
-
美保守派州长声称一岁外孙女有两把枪 网友批:枪支痴迷者疯了
原标题:美保守派州长声称一岁外孙女有两把枪网友批:枪支痴迷者疯了海外网4月15日电据《纽约邮报》14日报