CSS权重按“a,b,c,d”计算：内联样式为(1,0,0,0)，每个ID加b=1，每个类/属性/伪类加c=1，每个元素/伪元素加d=1，各部分独立计数不进位。
如果您在编写CSS样式时遇到样式未按预期生效的情况，可能是由于CSS选择器的特异性（权重）不同导致的。以下是计算HTML元素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独立贡献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元素权重值【元素】的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
725
收藏
