Specificity基于设定的匹配规则，浏览器通过设定好的优先级来判断哪些属性值DOM元素最为相关，从而在该DOM上应用这些值。

简单理解就是一个DOM的某个属性值有多个css样式设置，优先级高的那个应用。很多css设置不生效的问题，都是因为在某处定义了一个更高的优先级，从而导致该处样式不生效。

优先级的顺序如下：

  important > 内联(style) > ID > 类(class) > 标签(li...) | 伪类(:hover,:focus...) | 属性选择  [attr=''] > 伪对象(:before,:after) > 通配符(*) > 继承(inherit)

Specificity值的计算

一般采用10进制的简单相加计算方式。从0开始，一个行内样式+1000，一个id+100，一个属性选择器/class或者伪类+10，一个元素名，或者伪元素+1.

计算规则

A：如果规则是写在标签的style属性中（内联样式），则A=1，否则，A=0. 对于内联样式，由于没有选择器，所以 B、C、D 的值都为 0，即 A=1, B=0, C=0, D=0（简写为 1,0,0,0，下同）。

B：计算该选择器中ID的数量。（例如，#header 这样的选择器，计算为 0, 1, 0, 0）。

C：计算该选择器中伪类及其它属性的数量（包括类选择器、属性选择器等，不包括伪元素）。 （例如， .logo[id='site-logo'] 这样的选择器，计算为 0, 0, 2, 0）。

D：计算该选择器中伪元素及标签的数量。（例如，p:first-letter 这样的选择器，计算为0, 0, 0, 2）。