CSS样式权重是如何分配的

CSS样式权重（Specificity）的分配机制和计算规则如下：

一、权重等级体系（从高到低）

1. 行内样式（Inline Style）
 1,0,0,0

2. ID选择器
 0,1,0,0

3. 类/伪类/属性选择器
 0,0,1,0

4. 元素/伪元素选择器
 0,0,0,1

CSS样式权重是如何分配的?关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS 样式specificity权重分配，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准 具体规范入如下：

specificity用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

CSS优先级算法：

CSS优先级包含四个级别(行内选择符、ID选择符、类选择符、元素选择符)及各级别出现次数(根据次数计算优先级)。最后把这些值加起来，再就是当前元素的权重了。

继承或者* 的贡献值	0,0,0,0
每个元素（标签）贡献值为	0,0,0,1
每个类，伪类贡献值为	0,0,1,0
每个ID贡献值为	0,1,0,0
每个行内样式贡献值	1,0,0,0
每个!important贡献值	∞ 无穷大

权重是可以叠加的

比如的例子：

div ul li ——> 0,0,0,3

.nav ul li ——> 0,0,1,2

a:hover —–—> 0,0,1,1

.nav a ——> 0,0,1,1

#nav p —–> 0,1,0,1

注意：

1.数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0，

   所以不会存在10个div能赶上一个类选择器的情况。

2. 继承的 权重是 0

二、权重计算规则

1. 四元组结构：(行内, ID, 类, 元素)

   • 示例：

     #header .nav li:hover → 0,1,2,1

2. 无进位原则：

   /* 权重 0,0,0,11 */
   div div div div div div div div div div div {
     color: red;
   }
   
   /* 权重 0,0,1,0 → 胜出 */
   .my-class {
     color: blue;
   }

3. 继承样式权重为 0,0,0,0，最低优先级

三、特殊权重规则

1. !important：

   p { color: red !important; } /* 强制最高优先级 */

覆盖唯一方式：同属性同选择器再写!important

1. **通配符(*)**权重为0,0,0,0

2. 浏览器默认样式不受权重影响

四、权重对比流程

1. 比较行内样式数量

2. 比较ID选择器数量

3. 比较类/伪类/属性选择器数量

4. 比较元素选择器数量

5. 最后比较源码顺序（后来居上）

五、实战判断示例

/* 权重 0,0,1,1 */
ul#nav li.active { ... }

/* 权重 0,1,0,1 → 胜出 */
#sidebar ul li { ... }

六、开发建议

1. 避免滥用!important

2. 使用BEM命名规范减少权重竞争

3. 保持选择器简洁（建议不超过3级）

4. 优先用类选择器控制样式

5. 复杂场景可用[style]属性检测行内样式

通过理解这套权重机制，可以更精准控制样式覆盖关系，提升代码可维护性。建议通过浏览器的开发者工具实时查看选择器权重（Chrome显示为(0,1,0,1)格式）。

总结:

1.在权重小的选择器里加上!important能使权重变最大![!important是无穷大,不要轻易使用,绕过在开发中有多个!important,只能用同等样式,就近原则来提升权重!]

2.同等样式权重就是同样的权重越靠近body的代码,权重越大,越靠body远的权重越小!

3.最低权重 * [星号]的贡献值,它的权重0.0.0.0

4.继承权重为0–等于是说继承没得权重