当前位置：首页 > news >正文

CSS 特指度 (Specificity)

news 2025/9/11 13:27:58

是一套计算规则，用于确定当多个CSS规则冲突时，哪个选择器更“具体”、更“特殊”，从而优先级更高。

特指度(Specificity)计算细节

特指度通常表示为 (a, b, c, d) 的形式：

a: 是否使用内联样式（1或0）
b: ID选择器的数量
c: 类、属性、伪类选择器的数量
d: 元素、伪元素选择器的数量

比较时从左到右逐级比较，如(1,0,0,0) > (0,2,0,0)

1.内联样式 vs ID选择器
<div id="myDiv" style="color: red;">Hello World</div><style>
#myDiv {color: blue; /* 不会生效 */
}
</style>
特指度比较: (1,0,0,0) > (0,1,0,0)
特指度说明: (内联样式1个, ID选择器0个, 类选择器0个, 元素选择器0个) > (内联样式0个, ID选择器1个, 类选择器0个, 元素选择器0个)

2.多个ID选择器 vs 单个ID选择器
#header #title {color: red; /* 生效 */
}#content {color: blue; /* 不会生效 */
}
特指度比较: (0,2,0,0) > (0,1,0,0)
特指度说明: (内联样式0个, ID选择器2个, 类选择器0个, 元素选择器0个) > (内联样式0个, ID选择器1个, 类选择器0个, 元素选择器0个)

3.ID选择器 vs 多个类选择器
#main-content {color: red; /* 生效 */
}.container .article .text {color: blue; /* 不会生效 */
}
特指度比较: (0,1,0,0) > (0,0,3,0)
特指度说明: (内联样式0个, ID选择器1个, 类选择器0个, 元素选择器0个) > (内联样式0个, ID选择器0个, 类选择器3个, 元素选择器0个)

4.类选择器组合 vs 单个类选择器
nav.menu li.item a {color: red; /* 生效 */
}.special-link {color: blue; /* 不会生效 */
}
特指度比较: (0,0,2,3) > (0,0,1,0)
特指度说明: (内联样式0个, ID选择器0个, 类选择器2个, 元素选择器3个) > (内联样式0个, ID选择器0个, 类选择器1个, 元素选择器0个)

5.同等特指度 - 后者优先
div.content p {color: red; /* 不会生效 */
}.container > p {color: blue; /* 生效 */
}
特指度比较: (0,0,1,2) = (0,0,1,1)
特指度说明: 两者特指度相同，都是(内联样式0个, ID选择器0个, 类选择器1个, 元素选择器X个)，后者覆盖前者

6.伪类和属性选择器
form input[type="text"]:focus {border-color: red; /* 生效 */
}.input-focused {border-color: blue; /* 不会生效 */
}
特指度比较: (0,0,2,1) > (0,0,1,0)
特指度说明: (内联样式0个, ID选择器0个, 类/属性/伪类选择器2个, 元素选择器1个) > (内联样式0个, ID选择器0个, 类选择器1个, 元素选择器0个)

7.通用选择器不影响特指度
body #content * {color: red; /* 生效 */
}#content {color: blue; /* 不会生效 */
}
特指度比较: (0,1,0,1) > (0,1,0,0)
特指度说明: (内联样式0个, ID选择器1个, 类选择器0个, 元素选择器1个) > (内联样式0个, ID选择器1个, 类选择器0个, 元素选择器0个)
注意: 通用选择器(*)不增加特指度

8.否定伪类(:not)的特殊性
div:not(.special) {color: red; /* 不会生效 */
}div.normal {color: blue; /* 生效 */
}
特指度比较: (0,0,1,1) = (0,0,1,1)
特指度说明: 两者特指度相同，:not伪类本身不增加特指度，但其中的选择器(.special)会计入特指度计算，后者覆盖前者