CSS优先级计算方法详解

7 min read

在 CSS 里，每个样式规则都有一个优先级值，用于确定在相同元素上定义的多个规则中，哪个规则会优先被采用。

CSS 中的优先级是通过以下规则计算的：

  1. 每个元素都有一个基本优先级为 0。
  2. 对于每个样式规则，根据选择器的特殊性和使用的方式，为规则赋予一个优先级值。
  3. 如果两个或多个规则在选择器特殊性和使用方式上具有相同的优先级，则后面出现的规则优先级更高。
  4. 根据优先级值，选用具有最高优先级的规则来为元素应用样式。

优先级值的计算方式如下：

  • 对于每个 ID 属性的选择器，增加 100 基数分值
  • 对于每个类属性、属性或伪类的选择器，增加 10 基数分值
  • 对于每个元素或伪元素的选择器，增加 1 基数分值
  • 在特殊情况下，通配选择器的基数分值为 0

例如：

<div id="example" class="content"></div>

div#example {
  color: red;
} 

div.content {
  color: blue;
}

因为第一个规则使用了 ID 选择器，基数分值为 100。而第二个规则使用了类属性选择器，基数分值为 10。所以第一个规则的优先级更高。因此该 div 将显示为红色。