你真的了解CSS权重吗？

在 CSS 中，权重（specificity）和优先级（priority）用于确定当多个规则应用到同一个元素时，哪个规则具有更高的优先级。

1.权重

权重是一种表示选择器特定性的度量。它是由四个部分组成：内联样式、ID选择器、类/属性/伪类选择器和元素/伪元素选择器。每个部分都有一个权重值，权重值越大，优先级就越高。

权重值解析

根据属性或者选择器的不同，为了方便理解，可以理解为一共有6种权重值。权重值使用4位数字表示，表示方式为(a,b,c,d)，比如(1,0,0,0)、(0,1,0,0)，将这4位数字分别称为，千位、百位、十位、个位。

1. !important——至高无上
2. 行内样式——1,0,0,0
3. ID选择器——0,1,0,0
4. 类选择器、属性选择器、伪类——0,0,1,0
5. 元素、伪元素——0,0,0,1
6. 通配选择器（*）——0,0,0,0

注意，!important 虽然在权重中拥有至高无上的地位，但它的权重也不是最高的，如果用数值来讲，可以理解为是正无穷，但是这个正无穷和数学上不是一个概念，数学上正无穷是无界的，但在这里他是有界的，在这里，正无穷+1要比正无穷大。

误区

这里需要注意的误区是，有些文章直接将（1,0,0,0）和（0,1,0,0）直接理解成了1000和100，这是错误的。

这是因为权重的换算进制并不是10进制，这个进制在不同的浏览器当中也是不同的，在IE6中他的进制为256，而现在的浏览器，有可能是更大的数量。

如果类选择器的权值想要超过ID选择器，那么需要的是257个类而不是11个，有257个类选择器总权值才会是（1,1,0,0）超过了ID选择器的（0,1,0,0）。11个类选择器应该显示成（0,11,0,0）而不是直接理解为110。

举个栗子

#name{
    color:red
}
a[id="name"]{
    color:blue
}

这里第一个id选择器的权值为（0,1,0,0），而第二个使用了一个元素选择器和一个属性选择器，那么它的权值为（0,0,1,1），将这两个权值，从左至右，一位一位进行比较，遇大则大，所以最终将会显示成红色。

2.优先级

优先级是指在应用多个规则时，哪些规则将被应用。理解了权重之后，优先级就很好理解了，权重越大，优先级越高，而当权重相同时，则根据以下顺序决定优先级：

1. 内联样式具有最高的优先级。
2. ID 选择器具有比类/属性/伪类选择器更高的优先级。
3. 类/属性/伪类选择器具有比元素/伪元素选择器更高的优先级。
4. 同一类型的选择器，后声明的规则优先级更高。