CSS选择器及其权重

CSS选择器及其权重

css选择器类型

选择器	例子
id选择器	如#id
class选择器	如.class
属性选择器	如[type=“val”]
伪类选择器	如:hover
伪元素选择器	如 ::first-child
标签选择器	如：div
通配符	如：*

css选择器的权重

选择器	权重
!important	Infinity(无穷大)
行间样式	1000
id	100
class/属性/伪类	10
标签/伪元素	1
通配符	0

选择器权重计算规则

一般而言，选择器的权重值越高，则选择器的指向越准确，选择器的优先级越高。
单一选择器时，直接比较权重即可
多个选择器时，应计算比较

如：div span #name 1+1+100 = 102
div.name span 1+10+1 = 12

注意：!important 的无穷大与数学上的无穷大不是一个概念，在计算机中的无穷大都是有界的，而数学中的无穷大是无界的，所以当!important + 1 时是比!important 要大的。