CSS 样式覆盖原则，样式优先级，选择器优先级计算

MDN CSS 层叠与继承

冲突

创建了应用于同一个元素的同一样式的多个规则时，只会生效一个，其他规则不生效，我们称之产生冲突
样式生效的判别依据 三步走：

1. 资源顺序
2. 优先级
3. 重要程度

资源顺序

相同优先级的情况下，后创建的规则优于之前的规则（覆盖）

优先级

优先级顺序：

1.	!important	1-0-0-0-0
2.	行内样式	0-1-0-0-0
3.	id	0-0-1-0-0
4.	class / [属性] / 伪类	0-0-0-1-0
5.	元素 / 伪元素	0-0-0-0-1

优先级 具体 > 宽泛

在不特别指定规则时，样式有一些默认的继承规则。例如 颜色字体等

继承的通用属性值

值
inherit	设置该属性会使子元素属性和父元素相同。实际上，就是“开启继承”。
initial	将应用于选定元素的属性值设置为该属性的初始值。
revert	将应用于选定元素的属性值重置为浏览器的默认样式，而不是应用于该属性的默认值。在许多情况下，此值的作用类似于 unset。
revert-layer	将应用于选定元素的属性值重置为在上一个层叠层中建立的值。
unset	将属性重置为自然值，也就是如果属性是自然继承那么就是 inherit，否则和 initial 一样

{
  all: unset; // 撤销元素施加的样式
}

复杂选择器 优先级判定

一般来讲嵌套的越深权重就越高
计算权重（特异性）的方法：

• 为每个 id 在第三位加 1，
• 为每个属性([xx=xxx])、class类 或 伪类 在第二位加 1，
• 为每个元素名称或伪元素 在第一位加 1

形如：a-b-c 优先比较高位

通用选择器（*）、组合符（+、>、~、’ '）和调整优先级的选择器（:where()）不会影响优先级。