CSS特异性是一个非常重要的CSS概念，决定了当多个规则冲突时，哪个规则会被应用。
CSS特异性详细计算方法
CSS特异性是一个四元组：(a, b, c, d)，其中：
- a: 内联样式（style属性）
- b: ID选择器的数量
- c: 类、伪类、属性选择器的数量
- d: 元素、伪元素选择器的数量
1. 特异性计算规则
基本权重分配：
- 内联样式：
1,0,0,0 - ID选择器：
0,1,0,0 - 类/伪类/属性选择器：
0,0,1,0 - 元素/伪元素选择器：
0,0,0,1 - 通配符(*)、组合器(+, >, ~, 空格)：
0,0,0,0 :not()伪类不增加特异性，但其内部的选择器会计算
2. 计算示例
让我们用一个CSS案例来计算：
html
<header>
<div class="title">
<nav class="product">
<div class="header_title_products_item"></div>
</nav>
</div>
</header>
css
/* 规则A */
header .title nav div {
height: 6.25vw;
}
/* 规则B */
.header_title_products_item {
height: 2.6vw;
}选择器1：header .title nav div
- 元素选择器：
header、nav、div→ 3个 → d=3 - 类选择器：
.title→ 1个 → c=1 - 特异性：
0,0,1,3
选择器2：.header_title_products_item
- 类选择器：
.header_title_products_item→ 1个 → c=1 - 特异性：
0,0,1,0
3. 特异性比较方法
比较时从左到右逐位比较：
- 先比较a位（内联样式）
- 如果a相同，比较b位（ID选择器）
- 如果b相同，比较c位（类选择器）
- 如果c相同，比较d位（元素选择器）
案例比较：
header .title nav div:0,0,1,3.header_title_products_item:0,0,1,0
比较过程：
- a位：都是0 → 相同
- b位：都是0 → 相同
- c位：都是1 → 相同
- d位：3 vs 0 → 3 > 0
结果：header .title nav div的特异性更高
4. 更多计算示例
示例1：简单选择器
css
div /* 0,0,0,1 */
.class /* 0,0,1,0 */
#id /* 0,1,0,0 */示例2：复合选择器
css
div.class /* 0,0,1,1 */
div#id /* 0,1,0,1 */
div.class#id /* 0,1,1,1 */示例3：嵌套选择器
css
header div /* 0,0,0,2 */
header .class /* 0,0,1,1 */
header #id /* 0,1,0,1 */示例4：复杂选择器
css
header nav div.class:hover /* 0,0,2,3 */
/* 元素：header, nav, div → d=3 */
/* 类：.class, :hover → c=2 */5. 特异性比较表
| 选择器 | 特异性 | 比较结果 |
|---|---|---|
div |
0,0,0,1 | 最低 |
.class |
0,0,1,0 | 高于div |
div.class |
0,0,1,1 | 高于.class |
#id |
0,1,0,0 | 高于div.class |
div#id |
0,1,0,1 | 高于#id |
style="..." |
1,0,0,0 | 最高 |
6. 案例的详细比较
原始情况：
css
/* 规则A */
header .title nav div {
height: 6.25vw; /* 特异性：0,0,1,3 */
}
/* 规则B */
.header_title_products_item {
height: 2.6vw; /* 特异性：0,0,1,0 */
}比较过程：
规则A: 0,0,1,3
规则B: 0,0,1,0
逐位比较：
1. a位：0 vs 0 → 平局
2. b位：0 vs 0 → 平局
3. c位：1 vs 1 → 平局
4. d位：3 vs 0 → 规则A胜出结果：规则A的height设置生效
7. 如何提高选择器特异性
方法1：使用更具体的选择器路径
css
/* 原始：特异性 0,0,1,0 */
.header_title_products_item {
height: 2.6vw;
}
/* 改进：特异性 0,0,2,2 */
header .title nav .header_title_products_item {
height: 2.6vw;
}方法2：添加ID选择器（如果有ID）
css
/* 如果有ID：特异性 0,1,1,0 */
#specific_item.header_title_products_item {
height: 2.6vw;
}方法3：使用!important（谨慎使用）
css
.header_title_products_item {
height: 2.6vw !important; /* 最高优先级 */
}方法4：使用属性选择器
css
/* 特异性 0,0,2,0 */
.header_title_products_item[class] {
height: 2.6vw;
}8. 特异性提升策略
从低到高的特异性提升：
- 元素选择器 → 添加类选择器
- 类选择器 → 添加更多类或嵌套路径
- 复合选择器 → 添加ID选择器
- 所有选择器 → 使用!important（最后手段）
9. 最佳实践建议
- 避免过度嵌套：太长的选择器难以维护
- 使用类选择器：比元素选择器更具体，比ID选择器更灵活
- 谨慎使用!important：会破坏CSS的级联特性
- 保持一致性：使用相似的嵌套层级
在案例中，推荐解决方案：
css
/* 方案1：使用更具体的路径 */
header .title nav .header_title_products_item {
height: 2.6vw;
}
/* 方案2：使用!important（简单直接） */
.header_title_products_item {
height: 2.6vw !important;
}总结
CSS特异性计算的核心要点：
- 特异性格式 ：
(a, b, c, d)四元组 - 比较规则：从左到右逐位比较
- 权重分配：内联样式 > ID > 类 > 元素
- 您的案例 ：
header .title nav div(0,0,1,3) 比.header_title_products_item(0,0,1,0) 特异性更高
记住关键原则：
- 选择器越具体，特异性越高
- 相同特异性的情况下，后定义的规则覆盖先定义的
- 使用开发者工具可以查看实际应用的计算样式
理解特异性是掌握CSS优先级的关键，能帮助您更好地控制样式应用和解决样式冲突问题。