css 选择器优先级的计算过程

Posted 2020-06-24 学者先要会疑

以下转自互联网

下面看看官方对选择器的定义：
一个选择器的优先级由四个数字a,b,c,d确定。当比较两个选择器时，先比较a，a值大的优先级高，如果a相等则比较b，b值大的优先级高，以此类推。因此，无论b的值多大，也不会对a值的比较造成影响。
a由style确定，如果一个属性由元素上的style属性定义则a为1，否则a为0
b是id的数量
c是class和伪类以及属性的数量
d是tagname以及伪元素的数量

按照这个规则，我们来看看下面这个选择器的优先级：
 *             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
 li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
 li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
 ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
 h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
 ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
 li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
 #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
 style=""          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */