关于CSS样式优先级.doc

关于CSS样式优先级一般情况下：1位重要标志位 4位特殊性标志 声明先后顺序!important id class tag 使用!important可以改变优先级别为最高，其次是style对象，然后是id class tag ，另外，另外在同级样式按照申明的顺序后出现的样式具有高优先级。先来看下!important 这个诡异的东西。12divbackground:red!important;background:blue3除了IE6，其他浏览器都会显示背景为红色，正是!important的作用，意思就是只要我在这里我就是最重要的啦，任何东西都不能取代我，没看见都是一个 ！外加一个英文单词 important 吗？很形象，很贴切了。IE6这里会显示背景为蓝色，并不是IE6不支持!important，而是它会按照样式声明顺序后出现的覆盖前面的，此时它已经不认识!important了，它六亲不认了。这正是广为流传的IE6 hack之一。而如果这样写会正常显示背景为红色：12divbackground:blue;background:red!important;3再来看下4位特殊性标志 从左至右，每次给某一个位置+1，前一段对后一段具有无可辩驳的压倒性优势。无论后一位数值有多大永远无法超过前一位的1。1，内联样式 A：B：还有就是JS控制的内联样式style对象，document.getElementById(demo).style.color=red;这两者属于同一级别，不过一般情况是JS控制的内联样式优先级高，这与先后顺序申明有关系与本质无关，因为往往DOM操作是在DOM树加载完毕之后。2，ID选择器3，类，属性，伪类 选择器4，元素标签，伪元素 选择器关于CSS选择器可以查看W3C或者CSS的手册，不啰嗦了。注意下 伪类选择器LVHA伪类,样式按LVHA优先级顺序从右至左覆盖，不同的顺序会产生不同的效果。a:link - 默认链接样式a:visited - 已访问链接样式a:hover - 鼠标悬停样式a:active - 鼠标点击样式最后写下关于JS控制内联样式 带!important的现象：看下正常的Demo1：12divbackground:red!important;height:20px;3#demo1background:green;4.demo1background:blue;5112document.getElementById(demo1).style.background=black;3最终显示背景为红色，这应该不会有什么问题, !important 放到哪都会改变优先级的，而后面的JS代码也不会改变优先级。另外一个Demo2:12divbackground:red!important;height:200px;3#demo2background:green;4.demo2background:blue;56112document.getElementById(demo2).style.background=black;3IE6,7 显示红色FF2+ 显示黄色Opera9+ 显示红色Safari 显示黄色Demo3:12divbackground:red!important;height:200px;3#demo3background:green;4.demo3background:blue;5112document.getElementById(demo3).style.background=black!important;3IE6,7 显示红色FF2+ 显示黄色Opera9+显示黑色Safari 显示黑色解释下上面两个例子：JS控制的style对象 实际就是内联样式style，这个没错但是对于 JS控制style对象属性值里增加的!important 三个浏览器却给出了不同的结果：IE：JS控制style对象属性值完全覆盖内联style属性值，不支持Eperty=value !important，将报错:参数无效。FF2+：不完全支持Eperty=value !important : !important无效，不会报错, 如果内联style属性值无!important，则完全覆盖，有!important 则内联style属性优先级最高，不会受JS控制style的任何影响。Opera9+ ：JS控制style对象属性值完全覆盖内联style属性值，支持Eperty=value !important。Safari：支持Element.styl