选择器优先级的权重计算
计算 选择器 优先级 权重
2023-09-14 08:58:48 时间
计算过程
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三个值相等）相等时，后面声明的值将会是最终的计算值。