[蚂蚁集团]什么是 CSS 选择器权重以及它如何工作？

[webVueBlog]

[蚂蚁集团]什么是 CSS 选择器权重以及它如何工作？

[YM-huang]

常规来说，大家都知道样式的优先级一般为 !important > style > id > class > 标签 ，但是涉及多类选择器作用于同一个元素时优先级可以根据以下方法判断

CSS 选择器权重是用于决定在样式冲突时，哪一个样式会被应用到元素上的一个计算值。在 CSS 中，选择器的权重可以用四个值表示，分别是：

• 行内样式：1000
• ID 选择器：100
• 类选择器、伪类选择器、属性选择器：10
• 元素选择器、伪元素选择器：1

权重的计算方式是将各个选择器对应的值相加，计算出总权重，总权重越高的样式会被优先应用到元素上。

例如，以下选择器权重分别为：

#myDiv p.warning {
  color: red;
  font-weight: bold;
}

• ID 选择器 #myDiv：100
• 元素选择器 p：1
• 类选择器 .warning：10

因此，该选择器的总权重为 111，比如有一个选择器：

p {
  color: blue;
}

该选择器的权重只有 1，因此无论在哪里声明，总是会被第一个样式所覆盖。

如果两个选择器的权重相同，则按照书写顺序，后面的样式会覆盖前面的样式。这就是 CSS 的层叠机制。