关于CSS优先级算法是如何计算

关于CSS优先级算法是如何计算

之前我一直认为的是 内联标签>id选择器>类选择器>元素选择器 !important的权重最大 这种说法是不完整的。前提是它之后不会再出现相同的权重。如果权重相同，我们则需要去比较匹配规则的特殊性。

一个匹配规则一般由多个选择器组成，一条规则的特殊性由组成它的选择器的特殊性累加而成。选择器的特殊性可以分为四个等级。

第一个等级是内联样式 1000

第二个等级是id选择器，为0100

第三个等级是类选择器，伪类选择器，属性选择器是0010

第四个等级是元素选择器和伪元素选择器是0001.

规则中每出现一个选择器，就将它的特殊性进行叠加，这个叠加只限于对应的等级的叠加，不会产生进位。选择器特殊性值的比较是从左向右进行比较，也就是以1开头的特殊值要比0开头的特殊值要大。

如果两个规则的特殊性值相等的时候，那么就根据他们的引入顺序，后出现的规则的优先级高。

LVHA的由来

我们知道a标签有四种状态：链接访问前、链接访问后、鼠标滑过、激活，分别对应四种伪类:link、:visited、:hover、:active，并且这四个伪类如果对同一个元素设置同一个属性，那它们的声明顺序还有一定要求，一般大家都遵循“爱恨原则LVHA”（LoVe HAte），为什么是这个顺序？不能是其它顺序吗？

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