CSS权重按“a,b,c,d”计算：内联样式为(1,0,0,0)，每个ID加b=1，每个类/属性/伪类加c=1，每个元素/伪元素加d=1，各部分独立计数不进位。
如果您在编写CSS样式时遇到样式未按预期生效的情况，可能是由于CSS选择器的特异性（权重）不同导致的。以下是计算HTML元素CSS权重值的具体方法：
一、理解CSS权重的基本构成
CSS权重由四部分组成，按从左到右的优先级顺序为：内联样式、ID选择器、类/属性/伪类选择器、元素/伪元素选择器。每部分独立计数，不进位，最终以“a,b,c,d”形式表示。
1、内联样式的权重记为 a=1，其余为0，即 (1,0,0,0)；
2、每个ID选择器增加 b=1，如 #header 为 (0,1,0,0)；
3、每个类选择器（.class）、属性选择器（[type=”text”]）或伪类（:hover）增加 c=1；
4、每个元素标签（div、p）或伪元素（::before）增加 d=1。
二、计算内联样式的权重值
内联样式直接写在HTML元素的style属性中，其权重固定为最高层级，不受其他选择器影响。
1、找到HTML元素中带有 style 属性的标签，例如
2、该元素的CSS权重值确定为 (1,0,0,0)；
3、即使存在多个ID或类选择器定义了同一属性，内联样式仍会覆盖它们。
三、计算ID选择器组合的权重值
ID选择器具有较高优先级，每个ID独立贡献1单位b值，多个ID叠加时b值相加。
1、识别CSS规则中的ID选择器，例如 #nav #menu #item；
2、统计其中ID选择器的数量，此处为3个；
3、该规则权重值为 (0,3,0,0)；
4、注意：ID选择器之间用空格连接表示后代关系，不影响数量统计。
四、计算类与属性选择器混合的权重值
类选择器（.class）、属性选择器（[attr]）和伪类（:nth-child）均计入c位，可累加。
1、提取选择器中所有符合规则的部分，例如 .btn.active[type=”submit”]:hover；
2、逐个识别：.btn（1个类）、.active（1个类）、[type=”submit”]（1个属性）、:hover（1个伪类）；
3、共4处匹配，c值为4；
4、该选择器权重值为 (0,0,4,0)。
五、计算元素嵌套结构的权重值
纯元素标签选择器（如 div p span）仅影响d位，每层标签增加1，是权重中最低的一级。
1、分析选择器结构，例如 article header h1；
2、统计标签名数量：article、header、h1 共3个；
3、该规则权重值为 (0,0,0,3)；
4、注意：标签之间的空格、>、+、~等组合符不额外增加权重，仅统计元素名本身。
以上就是html中如何计算权重_使用CSS计算HTML元素权重值【元素】的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1605758.html
微信扫一扫 
支付宝扫一扫 
