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变得更加困难了。