CSS优先级

CSS优先级

浏览器通过优先级来判断哪一些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。

• 影响优先级的选择器

1. ID选择器(例如：#example)
2. 类选择器(例如，.example)、属性选择器(例如，[type="radio"])、伪类(pseudo-classes)(例如，:hover)
3. 类型选择器(例如，h1)、伪元素(paseudo-elements)(例如，::before)。

不影响优先级的选择器

通用选择器(*)，组合(+，>，~，' ')和否定伪类(:not())对优先级没有影响。（但是，在:not()内部声明的选择器会影响优先级）。

优先级计算

选择器的权重计算如下：
- 统计选择器中ID选择器的数量 （= A）
- 统计选择器中的类选择器，属性选择器和伪类的数量 （=B）
- 统计选择器中的类型选择器和伪元素的数量 （=C）
- 忽略通用选择器

通过三个分组的来比较权重：具有较大A值的优先级更高；如果A值相等，则比较B值，较大的优先级更高；如果B值相等，则比较C值；如果所有的值都相等，那么优先级相等。
注：允许同一个简单选择符的重复发生，并增加优先级

#app#app li{
    background: orange;
}

#app li{
    background: rgba(4, 87, 136, 0.568);
}

最终会应用orange样式

• 内联样式

内联样式总会覆盖外部样式表的任何样式

• !important
  

当在一个样式声明中使用一个!important 规则时，此声明将覆盖任何其他声明。使用 !important 是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则 使得调试找bug变得更加困难了。