css选择器优先级



css选择器优先级。所谓优先级是指CSS样式在浏览器中被解析的先后顺序。

(1) CSS不同引入方式的优先级:标签内嵌样式 > 头部书写样式 > 外部引用样式 > 浏览器默认样式。

(2) CSS选择器的优先级:id > class > tagname.

(3) 多个选择器混用时的优先级:例子.a .b c{}和.a c{},它们指向的目标都是c,但是前者的优先级高于后者。

注:当指向同一目标选择器的优先级相同时,后面的优先级大于前面的优先级;当同一个标签中定义有多个class名时,各个类选择器之间的优先级与html中的class名排列无关,而是与css文件中各个类选择器的排列有关。

选择器

特殊性 (a,b,c,d)

Style= ””

1,0,0,0

#wrapper #content {}

0,2,0,0

#content .datePosted {}

0,1,1,0

div#content {}

0,1,0,1

#content p {}

0,1,0,1

#content {}


0,1,0,0

p.comment .dateposted {}

0,0,2,1

div.comment p {}

0,0,1,2

.comment p {}

0,0,1,1

p.comment {}

0,0,1,1

.comment {}

0,0,1,0

div p {}

0,0,0,2

p {}

0,0,0,1

4、利用!important提升优先级:通过在css属性后面标明!important的方法提升该条属性的优先级。被!important注明的css属性具有最高的优先级,是不能被覆盖的。在IE6中!important具有一个BUG,就是同一组CSS属性中,!important是没有作用的。

例如: .outer{ color:blue !important; color:red; }

在IE6下文字的最终显示效果为红色,!important没有起作用。