【ES三周年】一文弄懂css权重|快消息

时间：2023-04-16 18:08:03 来源: 腾讯云

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

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

标签：

精彩推送

今日热讯：快船VS太阳：威少保罗老而弥坚，小卡KD巅峰对决，趁你病要你命

快船VS太阳：威少保罗老而弥坚，小卡KD巅峰对决，趁你病要你命,小卡,保罗,威少,布克,快船队,菲尼克斯太阳队

来源：2023.04.10

今日辟谣（2023年4月10日）每日观点

2023年4月10日谣言：培训机构响应“双减政策”，主动退还学费？真相：近期有网民反映...

来源：2023.04.10

世界微资讯！指挥调度系统行业市场容量及投资潜力分析

当前，全球经济逐渐复苏，数字经济成为经济增长的关键动力，但贸易政策的不确定性、地缘政治的紧张局面...

来源：2023.04.10

“知感冒•防流感”全民科普公益行活动走进河北石家庄

本文转自：人民网-河北频道感冒要重视，流感要早治。4月9日上午，“知感冒·防流感”全民科普公益行活动...

来源：2023.04.10

特斯拉储能产品Megapack落户上海，明年投产？|世界快播报

4月9日消息，美国新能源汽车龙头企业特斯拉宣布将在中国上海新建一个超级工厂，并非整车制造厂而是专门...

来源：2023.04.10

2022年洛阳洛龙区公开招聘事业单位工作人员面试资格确认相关事宜的通知

各位考生：根据《2022年洛龙区公开招聘事业单位工作人员实施方案》规定的程序要求，现将面试资格确认相...

来源：2023.04.10

联想刘军：中国区方案服务6年复合增长率达37.1%

封面新闻记者吴雨佳近日，联想集团执行副总裁兼中国区总裁刘军透露，经过6年转型，联想中国方案服务业务...

来源：2023.04.10

山西三源电力机电设备安装有限公司

1、山西三源电力机电设备安装有限公司于1998年04月13日在山西省运城市工商行政管理局登记成立。2、法定...

来源：2023.04.10

每日速读!2023上海车展媒体证什么时候能够注册

2023上海车展媒体证什么时候能够注册?答：2023年4月9日-4月16日24:00。上海车展媒体证件网上申请时间：2...

来源：2023.04.10

新闻快讯

X 关闭

精品推荐

X 关闭