CSS权重及样式优先级问题

1. CSS权重值计算

  一条样式规则的整体权重值包含四个独立的部分：[A, B, C, D];

 （1） A 表示内联样式（写在标签的style属性中），只有 1 或者 0 两个值；对于内联样式，由于没有选择器，所以 B、C、D 的值都为 0，即 A=1, B=0, C=0, D=0（简写为 1,0,0,0，下同）。

 （2）B 表示规则中 ID 的数量；（如，#header 这样的选择器，计算为 0, 1, 0, 0）。

 （3）C 表示规则中除了 ID、标签和伪元素以外的其它选择器数量，包括类选择器、属性选择器等；（如， .logo[id='site-logo'] 这样的选择器，计算为 0, 0, 2, 0）。

 （4）D 表示规则中标签和伪元素的数量；（如，p:first-letter 这样的选择器，计算为0, 0, 0, 2）。

 

2. CSS样式优先级

  ！important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承！！！ 根据 CSS 规范，具体性越明确的样式规则，权重值越高。

 （1）有 ！important标记的属性权重值无视没用！important 指定的一切情况；

 （2）多次指定 ！important  时，相互抵销。

 （3）inherit而来的属性定义，优先级低于任何直接指定的属性值。

 

3.  CSS权重值比较

• 根据规范，计算权重值时，A, B, C, D 四组值，从左到右，分组比较，从高位到低位（从 A 到 D）分别比较，高位相同才需要比较低位，即如果 A 相同，比较 B, 如果 B 相同，比较 C, 如果 C 相同，比较 D, 如果 D 相同，后定义的优先。