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,明显后面大,所有应使用后者样式,而按照我之前的想法,这里会应用前者样式,这里证明那是错误的。