CSS权重计算

A selector’s specificity is calculated as follows:

一个选择器的权重计算依据下面规则:

  1. count 1 if the declaration is from is a ‘style’ attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element’s “style” attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
  2. count the number of ID attributes in the selector (= b)
  3. count the number of other attributes and pseudo-classes in the selector (= c)
  4. count the number of element names and pseudo-elements in the selector (= d)
  5. The specificity is based only on the form of the selector. In particular, a selector of the form “[id=p33]” is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an “ID” in the source document’s DTD.

Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.

翻译解释

  1. 如果声明是“style”属性而不是带有选择器的规则, 计数1,否则为计数0(= a)(在HTML中,元素的“样式”属性的值是样式表规则)。这些规则没有选择器,所以a=1,b=0,c=0,d=0。
  2. 在选择器中计数ID属性的数目 (= b)
  3. 在选择器中计数其他属性和伪类的数目 (= c)
  4. 在选择器中计算元素名称和伪元素的数目 (= d)
  5. 特异性仅基于选择器的形式。特别地,将形式“[id= p33”]的选择器作为属性选择器(a=0,b=0,c=1,d=0)计数,即使id属性被定义为源文档DTD中的“id”。

注意1: 这里的 (= n) 这个代表的含义是 将统计出来的数目用 n 来表示, 那这里,在一组(一组指的是我们写的复合选择器)选择器里,a就是style属性是否存在(存在为a=1,不存在a=0),b就是id选择器的数目,c就是属性和伪类的数目,d就是元素和伪元素的数目.

注意2:通用选择器(*),子选择器(>)和相邻同胞选择器(+)并不在这四个等级中,所以他们的权值都为0。

将四个数字a-b-c-d(在一个有大小关系的数字系统中)连接起来给出了特殊性。

再解释下: 将这四个数字连起来,并放入一个有大小关系的数字系统中,其值就代表了这条选择器的权重。

请看下面例子:

 *             {}  /* 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 */

有人总结,一个选择器是否被选中依赖于下面算法得出的值的大小:
a的权重是1000,b是100, c是10, d是1。 然后 得出 a*1000 + b*100 + c*10 + d*1 这样算出的值。
我们来测试下

权重计算

一个错误的权重计算

请看如下测试: specificity

应用上述规则,#div11 应用了11个id选择器,一个style属性background-color,按照上述计算:11 * 100 > 1000 * 1 应该id选择器生效,但是最后生效的样式仍然使style属性,所以这个权重系统的假设并不正确.

正确的权重计算规则

这个权重系统的判断规则应是如下:

 // 规则1 a1-b1-c1-d1
 // 规则2 a2-b2-c2-d2
 if a1 > a2 /* 规则1生效 */ else /*规则2生效*/
 if b1 > b2 /* 规则1生效 */ else /*规则2生效*/
 if c1 > c2 /* 规则1生效 */ else /*规则2生效*/
 if d1 > d2 /* 规则1生效 */ else /*规则2生效*/
 // 这个计算规则是具有优先级的,a > b > c > d, 一旦前面的分出高低,后面规则的数量将不影响结果

important的使用影响优先级

  • !important 的使用始终高于其他规则;
  • 俩条都有!important时,还是依据上述规则。

参考文章

http://www.snook.ca/archives/html_and_css/understanding_c/ 其中说到解决权重快速的方法是避免使用 !important , 所以你要是不想给自己找麻烦,就不要使用!important