CSS 选择器权重计算

发表于 阅读次数： 本文字数： 431 阅读时长 ≈ 2 分钟

权重是用来确定哪个样式规则应该应用于元素的。权重越高，优先级越高。

权重计算分为四个等级：

行内 > ID 选择器 > 类选择器 > 元素选择器 > 通配选择器 *

  • 内联样式（Inline styles）：权重为 1000
  • ID 选择器（ID selectors）：权重为 100
  • 类选择器（Class selectors）、属性选择器（Attribute selectors）和伪类选择器（Pseudo-classes）：权重为 10
  • 元素选择器（Element selectors）和伪元素选择器（Pseudo-elements）：权重为 1

举例：

#my-id：权重为 100（一个ID选择器）
.my-class：权重为 10（一个类选择器）
div：权重为 1（一个元素选择器）
a:hover：权重为 11（一个元素选择器和一个伪类选择器）

当有多个选择器应用于同一个元素时，权重最高的选择器将应用其样式。如果权重相同，那么按照选择器在 CSS 中出现的顺序，后出现的选择器将覆盖先前的选择器。

一种简单的计算方法

格式：(a,b,c)，其中：
a: ID 选择器的个数
b: 类、伪类、属性 选择器的个数
c: 元素、伪元素 选择器的个数

举例：

1
2
3
4
5
6
7
8
// 计算结果为 (0,2,1)
.container span.slogan {
  color:red;
}
// 计算结果为 (0,1,3)
div>p>span:nth-child(1){
  color:green;
}

从左到右比较括号内的数字大小：

  • 如果数字相等，则继续比较
  • 如果数字其中一个较大，则较大值的选择器权重高，胜出，后面不再比较。
  • 如果三位一样大，则按照出现顺序，后出现的将覆盖先前的选择器。

TIPS: VSCode 鼠标移动到 CSS 选择器上时，会自动帮忙算出权重(Selector Specificity)。