css选择器优先级

css选择器优先级不得不讲算是css中的一个难点，前面看了许多人的文章，想来自己也来总结下。

根据前面我写过的css选择器总结一文,css选择器实际上就其本身对于元素的选择可以分为:

1.元素选择器(id,class,元素,*)

2.属性选择器

3.伪类

4.伪元素

注:关系选择器是将上面四种连接到一起，故可不予讨论。

我们用4位abcd为这4种选择器定义优先级:

按照由高到低的顺序分别为:

1000:(1)带有!important的属性(2)内联

0100:(1)id

0010:(1)class(2)属性选择器(3)伪类选择器

0001:(1)标签选择器(2)伪元素选择器

0000:(1)通配符选择器

注:带有!important拥有比内联更高的优先级，因为!important前面必定还有其他选择器

如

div{

  color:red !important;

}

<div style="color:blue;"></div>//显示为红色

(1).0001+1000=1001;

(2).1000

1001>1000,故应用important样式

使用的规则很简单，就是 选择器的权值加到一起，大的优先；如果权值相同，后定义的优先

样式系统从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其他选择符，样式系统就会继续向左移动，直到找到和规则匹配的元素，或者因为不匹配而退出。

  注：这里我刚开始认为应该是从左向右匹配，我马虎的认为左边的优先级一定比左边大，同一个位置进行比较，有大小之分就结束匹配，相同就同时向右边移动一位再匹配，实际上这是不对的。

  比如p .classA与.classB #idA，按照上面的优先级计算，这里值应为:0011与0110，明显后面大，所有应使用后者样式，而按照我之前的想法，这里会应用前者样式，这里证明那是错误的。