CSS优先级

总结排序：!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

选择器的特殊性值(Specificity)表述为4个部分，用0,0,0,0表示

1. ID选择器的特殊性值，加0,1,0,0。

2. 类选择器、属性选择器或伪类，加0,0,1,0。

3. 元素和伪元素，加0,0,0,1。

4. 通配选择器*对特殊性没有贡献，即0,0,0,0。

5. 最后比较特殊的一个标志!important（权重），它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为1,0,0,0,0。

{数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0}

例如：以下规则中选择器的特殊性分别是：

1a{color: yellow;}/*特殊性值：0,0,0,1*/

2div a{color: green;}/*特殊性值：0,0,0,2*/

3.demo a{color: black;}/*特殊性值：0,0,1,1*/

4.demo input[type="text"]{color: blue;}/*特殊性值：0,0,2,1*/

5.demo *[type="text"]{color: grey;}/*特殊性值：0,0,2,0*/

6#demo a{color: orange;}/*特殊性值：0,1,0,1*/

7div#demo a{color: red;}/*特殊性值：0,1,0,2*/

层叠
假如Specificity相同的两条规则应用到同一个元素会怎样？
css会先查看规则的权重（!important），加了权重的优先级最高，当权重相同的时候，会比较Specificity，当Specificity也一样的时候，css规则会按顺序排序，后声明的规则优先级高

LVHA
伪类的Specificity是0,0,1,0，4个伪类的Specificity相同，那么后面声明的规则优先级高。
当鼠标滑过a链接时，满足:link和:hover两个伪类，要改变a标签的颜色，就必须将:hover伪类在:link伪类后面声明；
同理，当鼠标点击**a链接时，同时满足:link、:hover、:active三种状态，要显示a标签**时的样式（:active），必须将:active声明放到:link和:hover之后。
因此得出LVHA这个顺序。这个顺序能不能变？可以，但也只有:link和:visited可以交换位置，因为一个链接要么访问过要么没访问过，不可能同时满足，也就不存在覆盖的问题。