CSS选择器权重比较的笔记总结

几类常用CSS选择器

---

以下他们单独作用在元素上的效果

行间样式：

<div style="background-color:block;">黑色背景</div>

id选择器：

#box{ background-color:blue; } 

<div id="box">蓝色背景</div>

class选择器（伪类选择器不列举）：

.box1{ background-color:red; } 

<div class="box1">红色背景</div>

标签选择器（伪元素选择器不列举）：

div{ backgorund-color:pink; }

<div>粉色背景</div>

通配符选择器：

*{ background-color:green; } 

<div>绿色背景</div>

 

综合作用在同一元素上的效果

#box{ background-color:blue; } 
.box1{ background-color:red; } 
div{ backgorund-color:pink; } 
*{ background-color:green; } 
<!--省略其他页面结构--> 

<div id="box" class="box1" style="background-color:block;">黑色背景</div>

结果将很明显是黑色背景。

 

为什么？

因为CSS选择器权重之间的比较！单从以上，可以得出在权重的比较上：行间样式>id选择器>class选择器和伪类选择器>标签选择器和伪元素选择器>通配符选择器,这样的初步结论，但是这在复杂选择器组合中很不适用！详细参考各种多层级的复杂选择器。

 

 

 

选择器权重

---

权重是什么？可以理解为CSS样式应用在HTML元素上的优先级。详细定义什么的，很多了。

 

CSS权重的表示：n,n,n,n

行间样式：1,0,0,0

id选择器：0,1,0,0

class选择器/伪类选择器：0,0,1,0

标签选择器/伪元素选择器：0,0,0,1

通配符选择器：0,0,0,0

 

CSS权重的比较方式：

一、网传：数值相加比较

1个id的权重就是1000，两个就是2000，以此类推，一个class是100，两个是200，tag是10，*（星号）是0，

注：有一个“！important",写在属性后面，它的权重是10000.

这种方式，确实很好的反应了权重比较的结果，

比如：

(1) #box .name div.age{ background:grey; } 的权重可以认为是1000+100+10+100=1210；

(2) .class div div#sex div{ background:block; } 的权重可以认为是100+10+10+1000+10=1130；

如果两组选择器选出的是同一个div元素，那么由于1210>1130，该div的背景颜色会被设置为灰色，而不是黑色。

 

这里有一个问题，就是这里的10000，1000,100,10,0这些数字的进制是多少？

当然不会是十进制，这个很好测试出来，也不是十六进制，也不是三十二进制……

（能力有限，本人测试的最高进制为259，即259层div和1个id选择器比较，此时仍然使用id选择器定义的样式！！！！）

因此，私以为，这种比较方式虽然能解决问题，但其实似乎并不是很靠谱……

 

二、网传：顺序按位比较（个人称呼）

即选择器的权重为四位，从左往右，依次对比相同位上的数值大小，相同则比较下一位。

比如：

id选择器的权重位：0,1,0,0

class选择器的权重为：0,0,1,0

 

还是上面的例子

(1) #box .name div.age{ background:grey; } 的权重可以认为是 0,1,(1+1),1 =》0,1,2,1；

(2) .class div div#sex div{ background:block; } 的权重可以认为是 0,1,1,(1+1+1) =》 0,1,1,3；

 

比较时，先比较左边第一位，都是0，

比较下一位，都是1，

再比较下一位，此时(1)在此为的权重为2，(2)在此位的权重为1，

后面一位便不再比较，直接使用(1)定义的样式。

 

使用此种比较方式有一点好处就是，不必考虑选择器的权重数值的进制。

 

 

 

总结：CSS选择器的权重真让人纠结，要是有大神有权重的权威解释，希望能给个提示，抱拳。

私以为，CSS选择器的比较应该是采用第二种，个人在今后未探究到真谛之前，也将使用这样的比较方式去判断（废话）……