优先级
一、认识
优先级就是分配给指定的 CSS 声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。而当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上。当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的 CSS 规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。
二、规则
每一个选择器类编都有它自己的优先级等级，它们不会被具有较低优先级的选择器覆盖。例如，权重为一百万的类选择器不会覆盖权重为一的 ID 选择器。评估优先级的最佳方法是对不同的优先级等级单独进行评分，并从最高的等级开始，必要时再计算低优先级等级的权重。
-
!important(覆盖所有优先级计算):!important用来覆盖所有优先级计算,用于修改特定属性的值,能够覆盖普通规则的层叠。- 注意: 覆盖
!important唯一的办法就是另一个!important具有相同优先级而且顺序靠后，或者更高优先级。
- 注意: 覆盖
-
内联样式, 权重为
1000: 内联样式，即style属性 内的样式声明，优先于所有普通的样式，无论其优先级如何。这样的声明没有选择器，但它们的优先级可以理解为1-0-0-0；即无论选择器中有多少个ID，它总是比其它任何优先级的权重都要高。 -
ID选择器, 权重为100 -
类选择器、属性选择器、伪类选择器, 权重为
10-
注意
-
伪类选择器
:where()不会影响优先级, 优先级为0 -
伪类选择器
not()、is()伪类本身对优先级没有影响，但它们的参数则会带来影响。参数中，对优先级算法有贡献的参数的优先级的最大值将作为该伪类选择器的优先级
-
-
-
元素选择器、伪元素选择器（
::before、::after）, 权重为1 -
相邻兄弟选择器
+、子选择器>、后代选择器*, 权重为0 -
继承得到的样式（优先级最低）
-
优先级相同时: 后面样式覆盖前面样式
-
样式表来源不同时: 内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式
三、计算
浏览器如何计算Css优先级,本质上，不同类型的选择器有不同的分数值，把这些分数相加就得到特定选择器的权重，然后就可以进行匹 配。一个选择器的优先级可以说是由三个不同的值（或分量）相加，可以认为是百（ID)十（类）个（元素）——三位数的三个位数
-
ID选择器: 选择器中包含ID选择器则百位得一分。 -
类选择器、属性选择器、伪类选择器: 选择器中包含类选择器、属性选择器或者伪类则十位得一分。
-
元素选择器、伪元素选择器: 选择器中包含元素、伪元素选择器则个位得一分。
| 选择器 | ID | 类 | 元素 | 优先级 |
|---|---|---|---|---|
h1 | 0 | 0 | 1 | 0-0-1 |
h1 + p::first-letter | 0 | 0 | 3 | 0-0-3 |
li > a[href*="en-US"] > .inline-warning | 0 | 2 | 2 | 0-2-2 |
#identifier | 1 | 0 | 0 | 1-0-0 |
div:nth-child(1) | 0 | 1 | 1 | 0-1-1 |
button:not(#mainBtn, .cta) | 1 | 0 | 1 | 1-0-1 |