选择器的特殊性

在css中可以选择多种方法来选择元素，设置元素的样式，但是最后元素的会遵从哪种方法所设置的样式呢？反正最终肯定只有一个规则可以胜出，所以会有一个判断标准来衡量这些方法的设置优先级，即优先显示哪种设置样式的判断规则。css权威指南中翻译为选择器的特殊性 。 对于每个规则，用户代理会计算选择器的特殊性，并将这个特殊性附加到规则中的各个声明。如果一个元素有两个或者多个冲突的样式声明，最高特殊性的声明就会胜出。（就像给每个样式声明不同的权值，最终权值大的声明将被采用）

 

选择器的特殊性由选择器本身的组件确定，特殊值的描述分为四个部分——0，0，0，0；

• 对于选择器给定的各个id属性值，加 0，1，0，0
• 对于选择器中给定的各个类（class）属性值、属性选择或者伪类， 特殊性加 0，0，1，0
• 对于选择器中给定的各个元素和伪元素， 加 0，0，0，1；
• 在 css2.1中明确指出，伪元素具有特殊性，特殊性为 0，0，0，1
• 结合符和通配符选择器对特殊性没有任何贡献,但是有0特殊性；继承的样式没有特殊性，比0特殊性还要低

举个例子：

h1 { color: red;}   // 特殊性为 0, 0, 0, 1

p em { color: purple;}  //  0, 0, 0, 2  (p和em 两个元素叠加)

.grape { color: red;}  //类选择器 特殊性为 0 , 0, 1, 0

*.nav-top {color: red;} //特殊性为 0,0,1,0

p.nav-item   li.inner-nav { color: bule;} // 特殊性为 0，0，2，2

#img-url {color: red;} //id选择器， 特殊性为 0, 1, 0, 0

div#sidebar  *[href] { color: purple;} //特殊性为 0，1，1，1

 

比较他们的特殊性高低（规则采取的优先级先后）的规则是：就像比较数字大小一样，一个四位，前面位置有值永远比后面的大，因为领先一个量级，比如 ： 0，1，0，0 比 0，0，10，0  的特殊性高， 如果最高的级数一样，就比较下一级数，比如

0，2，1，1 和 0，2，1，2  逐级比较 最后是 0，2，1，2 的特殊性高。其实可以按照这四位是个十进制自然数，每个位上代表不同的量级，比如 0，2，1，1 可以这样表示  0*10^3 + 2*10^2 + 1*10^1 + 1*10^0 = 211 ， 0，2，1，2 则可以表示成 212 ,所以最后是 0,2,1,2 的特殊性高。

那最前面的一个0是给谁呢？谁的特殊性最高？

在css中 第一个0 是留给内联样式声明的，它比其他所有的特殊性都要高，每个内联样式声明的特殊性都是 1, 0, 0, 0