【ES三周年】一文弄懂css权重-全球通讯
2023-04-12 21:32:27 腾讯云

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

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

热门推荐

文章排行

  1. 2023-04-12【ES三周年】一文弄懂css权重-全球通讯
  2. 2023-04-12破解保险配置难题,蚂蚁保上线行业首个AI保险规划师“省心配”_当前快讯
  3. 2023-04-12学习园地 | 创新型中小企业、专精特新中小企业、专精特新“小巨人”企业如何评价认定?
  4. 2023-04-12张继科床照疑曝光,痞幼大量私密照流出,发文:有多少受骗的女孩 全球最新
  5. 2023-04-12最新快讯!“骚扰”女下属被停职 高校院长被曝即将回归教学管理工作
  6. 2023-04-12十五个地区第一档月最低工资标准在两千元及以上——最低工资标准来了-报资讯
  7. 2023-04-12冒菜的做法及配方视频_冒菜的做法及配方
  8. 2023-04-122023年4月12日山西省菜花批发价格行情
  9. 2023-04-12环球要闻:德祉永馨是什么意思_馨是什么意思
  10. 2023-04-12焦点播报:重庆旅游投资集团13亿元私募债更新至“已受理”
  11. 2023-04-12NEJM:临床试验表明CAR-T细胞疗法Ide-cel 有望治疗复发的多发性骨髓瘤患者
  12. 2023-04-12汪小菲在香港秘密会见了亿万富翁的女儿,两人牵手,女方离婚5个月
  13. 2023-04-12全球视点!上山挖笋,一锄头下去高烧42度
  14. 2023-04-12【环球热闻】瓜迪奥拉:曼城3-0赢拜仁不轻松 在情绪上我已被摧毁
  15. 2023-04-12把握市场预期低点 布局航空超级周期 全球热消息
  16. 2023-04-12品高软件科创属性或显短板 独董任职信息涉嫌选择性披露-视点
  17. 2023-04-12存款“降息”阵营扩大 中小银行还有揽储优势吗
  18. 2023-04-12观察:4月11日基金净值:景顺长城品质成长混合A最新净值1.2477,跌0.06%
  19. 2023-04-11【全球快播报】霍尼韦尔落地护眼台灯怎么样,效果真实评测
  20. 2023-04-11什么网络电话好用不花钱_什么网络电话好_当前播报