正文

一、CSS 优先级规则概览

CSS 选择器有着明显的不可逾越的等级制度，分为 0~5 这 6 个等级，其中前 4 个等级由 CSS 选择器决定，后 2 个等级由书写形式和特定语法决定。

• 0级：通配选择器、选择符和逻辑组合伪类；

* { color: #000; }

• 通配符指 空格、>、+、~ 和 ||。
  逻辑组合伪类有 :not()、:is() 和 :where 等，这些伪类本身不影响 CSS 优先级，影响优先级的是括号里面的选择器。

:not() {}

• 1级：标签选择器；

body { color: #333; }

• 2级：类选择器、属性选择器、伪类；

.foo { color: #666; }
[foo] { color: #666; }
:hover { color: #333; }

• 3级：ID 选择器；

#foo { color: #999; }

• 4级：style 属性内联；

<span style="color: #ccc;">优先级</span>

• 5级：!important。important 是顶级优先级，可以重置 JavaSript 设置的样式，唯一推荐使用场景就是使 JavaScript 设置失效。对于其他场景，没有任何使用它的理由，切勿滥用。

.foo[style*="color: #ccc"] {
  color: #fff !important;
}

不难看出，CSS 选择器的优先级（0 级至 3 级）属于 CSS 优先级的一部分，也是最重要、最复杂的部分，学会 CSS 选择器的优先级等同于学会了完整的 CSS 优先级规则。

二、CSS 选择器的计算规则

每一段 CSS 语句的选择器都可以对应一个具体的数值，数值越大优先级越高，其中的 CSS 语句将被优先渲染。其中，出现一个 0 级选择器，优先级数值 +0；出现一个 1 级选择器，优先级数值 +1；出现一个 2 级选择器，优先级数值 +10；出现一个 3 级选择器，优先级数值 +100。