css选择器及其优先级

css选择器

常见的css选择器有id选择器、类选择器、元素选择器、属性选择器、伪类选择器和伪元素选择器。

css的选择器是有优先级的：元素内定义的样式>id选择器>class选择器 属性选择器、伪类选择器>元素选择器、伪元素选择器

css优先级的比较方法

css选择器的特殊性表示为四个维度，用0,0,0,0表示

元素内部定义的样式：1,0,0,0

id选择器：0,1,0,0

类选择器 属性选择器、伪类选择器：0,0,1,0

元素选择器、伪元素选择器：0,0,0,1

!important（权重），它没有特殊性值，但它的优先级是最高的，

为了方便记忆，可以认为它的特殊性值为1,0,0,0,0

计算机优先级的流程：

首先根据选择器的类型计算出总纬度

若纬度相同 则比较来源

若前两者都相同 则后面声明的优先级高

选择器特殊性值是从左向右排序的，特殊性值1,0,0,0大于以0开头的所有特殊性值，

即便它是0,99,99,99，优先级依然比1,0,0,0要低。

很多人都知道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可以交换位置，

因为一个链接要么访问过要么没访问过，不可能同时满足，也就不存在覆盖的问题

通过在样式规则后面添加!important关键词，可以将该样式规则提高到最高优先级。

!important是用来使IE6和IE7、IE8、火狐(Firefox)、google等浏览器做兼容的，

但IE6不能执行!important。当 !important 规则被应用在一个样式声明中时，该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪个位置. 尽管如此, !important规则还是与优先级毫无关系.使用 !important不是一个好习惯，因为它改变了你样式表本来的级联规则，从而难以调试。

参考文献：CSS魔法堂：选择器及其优先级

CSS选择器优先级及!important属性