css选择器权重及其计算规则

css选择器

---

---

选择器类型

• ID　　#id

• class　　.class

• 标签　　p

• 通用　　*

• 属性　　[type=“text”]

• 伪类　　：hover

• 伪元素　　::first-line

• 子选择器、相邻选择器

css选择器权重值

选择器	权重
!important	权重
!important	Infinity(无限大)
行列样式	1000
Id选择器	0100
Class选择器/属性/伪类	0010
标签选择器	0001
*通配符选择器	0000 (大于默认样式与继承验样式)
继承样式	权重最小(比*通配符还小)

注意：选择器的权重值不是一个确定的值，例如标签选择器的权重值为1，但是这个1是一个256进制数，就是0到255后+1才是1。就是说权重值2和1中间差了255。这表示256个权重值为1的选择器加一起才抵得上一个权重为2的，这在后面权重计算有用。
还有需要注意的是，！important的权重值虽然是正无穷，但其实也是可也计算的，比如正无穷+1或者*1，就是要比正无穷大，在计算机中正无穷的值，都是一个有界的。不是数学上无界的一个慨念！

---

权重计算方法

一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。单一选择器直接比较权重，多个选择器则需要计算。
复杂的计算方法：

• 用1表示派生选择器的优先级
• 用10表示类选择器的优先级
• 用100标示ID选择器的优先级
  • div.test1 .span var 优先级 1+10 +10 +1
  • span#xxx .songs li 优先级1+100 + 10 + 1
  • #xxx li 优先级 100 +1

案例