218. 【CSS-选择器世界】CSS-优先级规范概览

一、CSS 优先级规则概览

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

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

  * { color: # 000; }
  

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

  :not() {}
  

• 1级：标签选择器；

  img{
     width: 100%;
     }
     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。

选择器	计算值	计算细则
* { }	0	1 个 0 级统配选择器，优先级数值为 0
dialog { }	1	1 个 1 级标签选择器，优先级数值为 1
ul > li { }	2	2 个 1 级标签选择器，1 个 0 级选择符，优先级数值为 1 + 0 + 1
li > ol + ol { }	3	3 个 1级标签选择器，2 个 0级选择符，优先级数值为 1 + 0 + 1 + 0 + 1
.foo { }	10	1 个 2 级类名选择器，优先级数值为 10
a:not([rel=nofoolow]) { }	11	1 个 1 级标签选择器，1 个 0 级否定伪类选择器，1 个 2 级属性选择器，优先级数值为 1 + 0 + 10
a:hover { }	11	1 个 1 级标签选择器，1 个 2级伪类，优先级数值为 1 + 10
ol li.foo { }	12	1 个 2 级伪类选择器，2 个 1 级标签选择器，优先级数值为 10 x 2 + 1
li.foo.bar { }	21	2 个 2 级类名选择器，1 个 1 级标签选择器，有限计数值为 2 x 10 + 1
# foo { }	100	1 个 3 级 ID 选择器，优先级数值为 100
# foo .bar p { }	111	1 个 3级 ID 选择器，2 个 0 级选择符，1 个 3 级类名选择器，1 个 1 级标签选择器，优先级数值为 100 + 2 x 0 + 10 + 1