几乎所有的 CSS 样式冲突、样式覆盖等问题都与 CSS 声明的优先级错位有关。因此，在详细阐述 CSS 选择器的优先级规则之前，我们先快速了解一下 CSS 全部的优先级规则。

CSS选择器的优先级

几乎所有的 CSS 样式冲突、样式覆盖等问题都与 CSS 声明的优先级错位有关。

CSS优先级规则概览

0. 通配选择器、选择符和逻辑组合伪类。

   通配符选择器(*) ，选择符 +,>,~,空格,||，逻辑组合伪类 :not(),:is() ,:where。

   提示

   :not（）和 :is（）的优先级将由其逗号分割的参数中优先级最高的选择器指定，而 :where()的优先级 为0

1. 标签选择器。

   body {color:#333;}
   

2. 类选择器、属性选择器和伪类。

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

3. ID选择器

   #foo {coleor:#fff}
   

4. style内联属性

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

5. !important

   .foo { color: #fff !important; }
   

   !important是顶级优先级，唯一推荐使用的场景是使JavaScript设置无效。

深入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=nofollow]) {}	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级标签选择器，1个0级空 格选择符，优先级数值为1+0+1+10
li.foo.bar {}	21	2个2级类名选择器，1个1级标签选择器，优先级数值 为10×2+1
#foo {}	100	1个3级D选择器,优先级数值为100
#foo .bar p {}	111	1个3级ID选择器，1个2级类名选择器，1个1级标签 选择器，优先级数值为100+10+11

对于相同优先级数值的选择器，具有“后来居上”的规则，即层叠性。

提示

CSS选择器的优先级与DOM元素的层级关系没有任何关系。

增加CSS选择器优先级的小技巧

.foo { color: #333; }
/*增加嵌套*/
father .foo {}
/*增加一个标签选择器*/
div.foo {}

/*重复选择器本身*/
.foo.foo {}
/*借助属性选择器*/
.foo[class] {}
#foo[id] {}

/*借助伪类选择器*/
#foo:not(#bar)