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 相同,后定义的优先。

宝剑锋从磨砺出,梅花香自苦寒来。
原文地址:https://www.cnblogs.com/haimengqingyuan/p/5453180.html