前端面试CSS系列——选择器、权重计算（二）

#id{font-size:18px;}.class{font-size:16px;}最终文字大小为18px，根据选择器类型#id的计算结果值为：1,0,0；.class的值为：0,1,0。计算过程我们先压表，然后点击查看代码示例中同等优先级的匹配规则。class{font-size:18px;}[class='class']{font-size:16px;}Lasttext的大小是16px。根据选择器类型的计算结果，.class的值为：0,1,0，[class='class']的值为：0,1,0。点击查看代码示例具体上面我们说#id的计算结果为：1,0,0；.classand[class='class']evaluatesto:0,1,0为什么会计算出这样的值呢？这就是我们要讲的specific，英文specific。下面引用W3C官方的译文：选择器的特殊性计算如下：如果声明来自“样式”属性而不是带有选择器的规则，则计数1，否则为0(=a)（在HTML中，元素的值“style”属性是样式表规则。这些规则没有选择器，所以a=1,b=0,c=0,d=0.)countthenumberofIDattributesintheselector(=b)countthenumber选择器中其他属性和伪类的数量(=c)计算选择器中元素名称和伪元素的数量(=d)特异性仅基于选择器的形式。特别是，“[id=p33]”形式的选择器被算作属性选择器（a=0，b=0，c=1，d=0），即使id属性被定义为“ID"在源文档的DTD中。连接四个数字a-b-c-d（在具有大基数的数字系统中）给出了特异性。选择器的特殊性计算规则如下：如果CSS声明来自HTML元素的样式属性，而不是带选择器的规则，则计算为1，否则为0；（在HTML中，元素的样式属性值是样式表规则。这些规则没有选择器；元素的style属性定义的样式规则在特异性计算中用a表示，所以通常在HTML中，元素的style属性定义的样式表规则的特异性表示为：a=1,b=0，c=0，d=0。)计算选择器中id属性的个数，用b表示选择器中其他属性（包括类属性）和伪类的个数，用c表示选择器中元素名和伪元素的个数，而用d来表示“特异性”这个词真的很难理解，按照语义，我根本不明白它是什么意思，为了更好的理解，我用“权重值”来表示“特异性”.计算示例*{}/*a=0b=0c=0d=0->权重值=0,0,0,0*/li{}/*a=0b=0c=0d=1->权重值=0,0,0,1*/li:first-line{}/*a=0b=0c=0d=2->权重值=0,0,0,2*/ulli{}/*a=0b=0c=0d=2->权重值=0,0,0,2*/ulol+li{}/*a=0b=0c=0d=3->权重值=0,0,0,3*/h1+*[rel=up]{}/*a=0b=0c=1d=1->权重值=0,0,1,1*/ulolli.red{}/*a=0b=0c=1d=3->权重值=0,0,1,3*/li.red.level{}/*a=0b=0c=2d=1->权重值=0,0,2,1*/#x34y{}/*a=0b=1c=0d=0->权重值=0,1,0,0*/style=""/*a=1b=0c=0d=0->weightvalue=1,0,0,0*/注意：当ID选择器用作属性选择器时有时,如[id='id'],权重值的计算会使用C级来计算权重值计算规则weightvalue=a*num,b*num,c*num,d*num;权重值的计算网上还有一个比较流行的说法：style属性定义的样式权重值为1000，一个id选择器的权重值为100，一个属性和伪类选择器的权重为表示为10，一个元素名和伪元素的权重值都是1。例如：按照我们说的权重值计算规则，图中的总值应该表示为：0,1,1,3.直接用数字113只是为了方便记忆，但是选择器优先级的比较不能用数字来比较。例如：两条匹配规则，一个是11个属性选择器，一个是1个id选择器，比较它们的权重值时：11个属性选择器得到的结果是110，发送第二个id选择器得到的结果是100。很明显“11个属性选择器”得到的数值最大，是否优先级最高？让我们来做个实验：HTML文本应用了样式