样式选择符的优先级

样式选择符的优先级也叫特指度，不同类型的选择符有不同的特指度。

特指度可以用四个部分的符号表示 0,0,0,0。其中前一部分的值始终大于后一部分，不管值的大小是多少，特指度的比较总是从左向右比较。

0,0,1,0 > 0,0,0,12
0,1,0,0 > 0,0,1,1
1,0,0,0 > 0,9,9,9

特指度的规则

1. 选择符中的每个ID选择器，值加 0,1,0,0
2. 选择符中的每个类选择器、属性选择器、伪类选择器，值加 0,0,1,0
3. 选择符中的每个元素选择器、伪元素，值加 0,0,0,1
4. 连接符和通用选择符不增加特指度，也就是 0,0,0,0，eg：+ > *

一些简单的规则

h1 p { color: red; }
// 特指度 0,0,0,2

p#first { color: white; }
// 特指度 0,1,0,1

div p#first em.sec { color: blue; }
// 特指度 0,1,1,3

样式书写的先后顺序和特指度的对比

h3 p { color: gray;}
div p { color: black;}

div>
  <h3>
    <p>this is test</p>
  </h3>
</div>

// 上述样式的规则，让段落内的字体颜色设置位黑色

html body { background-color: gray; }
body { background-color: red; }

// 默认后面的样式会覆盖前面的样式，但这里第一条规则的特指度高于第二条，所以 body 的背景会显示为红色

行内样式的特指度

特指度用了四部分来定义，这里的第一位就是保留给行内样式，所有行内样式的特指度都把第一位标位 1 ，所以行内样式的特指度比其他选择符都高。

p { color: black; }

<p style="color: red;">Hello World!<p>