html中如何计算权重_使用CSS计算HTML元素权重值【元素】

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、每个元素标签（p、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个；

标签： css html 伪元素 css选择器 css样式 html元素 id选择器 属性选择器 伪类选择器 red