选择器优先级的权重计算

计算过程

1.W3C文档选择器权重的计算。

文档指出：

A selector’s specificity is calculated for a given element as follows:

• count the number of ID selectors in the selector (= A)
• count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= B)
• count the number of type selectors and pseudo-elements in the selector (= C)
• ignore the universal selector

 

Examples:

*               /* a=0 b=0 c=0 */
li              /* a=0 b=0 c=1 */
ul li           /* a=0 b=0 c=2 */
ul ol+li        /* a=0 b=0 c=3 */
h1 + *[REL=up]  /* a=0 b=1 c=1 */
ul ol li.red    /* a=0 b=1 c=3 */
li.red.level    /* a=0 b=2 c=1 */
#x34y           /* a=1 b=0 c=0 */
#s12:not(FOO)   /* a=1 b=0 c=1 */
.foo :matches(.bar, #baz)
                /* Either a=1 b=1 c=0
                   or a=0 b=2 c=0, depending
                   on the element being matched. */

把权重分为了 A,B,C 三个级别，A > B > C , A,B,C 直接各自计算。也就是会优先计算 A 的权重，如果相等会计算 B 的权重，以此类推。

相当时标签C, class类名B,  ID为A, 如#test .foo div   换算过来是 a=1 b=1 c=1

<div class="test_wrap" id="test_wrap" data-show="true">
    <div class="test"></div>
    <p>taobao.com</p>
</div>

 

1:标签

div { /*type selectors*/
    padding:1px;   /*a = 0 , b = 0 , c = 1*/
}

2.class类名

.test_wrap{  /*class selectors*/
    padding:12px;  /*a = 0 , b = 1 , c = 0*/
}

3.标签 + 类名

div .test{ /*type selectors + class selectors*/
    padding:123px;  /*a = 0 , b = 1 , c = 1*/
}    

4.class类名

.test_wrap .test{ /* class selectors + class selectors */
    padding:1234px;   /*a = 0 , b = 2 , c = 0*/
}

5.ID

#test_wrap { /*type selectors*/
    padding:100px;   /*a = 1 , b = 0 , c = 0*/
}

声明先后顺序

当 A 、B 、C 所计算的权重都相等时（ABC三个值相等）相等时，后面声明的值将会是最终的计算值。