CSS 特异性的概念以及它如何影响样式应用

CSS 特异性（Specificity）详解

什么是CSS特异性

CSS特异性是浏览器用来确定哪条CSS规则应该应用到元素上的算法。当多个CSS规则都匹配同一个元素时，特异性最高的规则将被应用。

特异性计算规则

特异性由四个部分组成，按优先级从高到低排列：

1. 内联样式 (style属性) - 计为 1,0,0,0
2. ID选择器 (#id) - 计为 0,1,0,0
3. 类选择器、属性选择器、伪类 (.class, [attr], :hover) - 计为 0,0,1,0
4. 元素选择器、伪元素 (div, ::before) - 计为 0,0,0,1

注：通用选择器(*)、组合符(>, +, ~)和否定伪类(:not())不影响特异性

实际示例

/* 特异性: 0,0,0,1 */
p {
  color: blue;
}

/* 特异性: 0,0,1,0 */
.highlight {
  color: green;
}

/* 特异性: 0,1,0,0 */
#main-content {
  color: red;
}

/* 特异性: 0,0,1,1 */
p.highlight {
  color: orange;
}

/* 特异性: 0,1,1,1 */
#main-content p.highlight {
  color: purple;
}

<div id="main-content">
  <p class="highlight">这段文字会显示什么颜色？</p>
</div>

结果：文字将显示为紫色，因为 #main-content p.highlight 的特异性最高 (0,1,1,1)。

特殊情况

1. 相同特异性的情况

当多条规则具有相同的特异性时，后定义的规则优先：

/* 这个会被覆盖 */
.title {
  color: red;
}

/* 这个会生效 */
.title {
  color: blue;
}

2. !important 声明

!important 会覆盖正常的特异性计算，但应谨慎使用：

p {
  color: blue !important; /* 这会覆盖其他所有规则 */
}

#main {
  color: red; /* 即使特异性更高，也不会生效 */
}

3. 继承样式

继承的样式特异性为 0,0,0,0，总是被其他任何特异性规则覆盖。

实践建议

1. 避免过度使用ID选择器：它们的特异性很高，难以覆盖
2. 使用类选择器为主：提供良好的特异性平衡
3. 避免使用!important：除非万不得已
4. 合理组织CSS结构：利用层叠特性而非依赖高特异性选择器

计算工具

可以使用以下方法快速计算特异性：

• 使用浏览器开发者工具查看计算后的样式
• 在线特异性计算器
• CSS代码检查工具如Stylelint

理解CSS特异性有助于编写更可维护的样式表，避免样式冲突问题。