资源描述:
《关于css样式优先级》由会员上传分享,免费在线阅读,更多相关内容在应用文档-天天文库。
1、关于CSS样式优先级一般情况下:[1位重要标志位]>[4位特殊性标志]>声明先后顺序!important>[id>class>tag] 使用!important可以改变优先级别为最高,其次是style对象,然后是id>class>tag,另外,另外在同级样式按照申明的顺序后出现的样式具有高优先级。先来看下!important这个诡异的东西。1 除了IE6,其他浏览器都会显示背景为红色,正是!importan
2、t的作用,意思就是只要我在这里我就是最重要的啦,任何东西都不能取代我,没看见都是一个!外加一个英文单词important吗?很形象,很贴切了。IE6这里会显示背景为蓝色,并不是IE6不支持!important,而是它会按照样式声明顺序后出现的覆盖前面的,此时它已经不认识!important了,它六亲不认了。这正是广为流传的IE6hack之一。而如果这样写会正常显示背景为红色:1 再来看下4位特殊性标志[0.
3、0.0.0]从左至右,每次给某一个位置+1,前一段对后一段具有无可辩驳的压倒性优势。无论后一位数值有多大永远无法超过前一位的1。1,内联样式[1.0.0.0] A:B:还有就是JS控制的内联样式style对象,document.getElementById("demo").style.color="red";这两者属于同一级别,不过一般情况是JS控制的内联样式优先级高,这与先后顺序申明有关系与本质无关,因为往往DOM操作是在DOM树加载完毕之后。2,ID选择器 [0.1.0.0]3,类,属性,伪类选择器
4、 [0.0.1.0]4,元素标签,伪元素选择器 [0.0.0.1]关于CSS选择器可以查看W3C或者CSS的手册,不啰嗦了。注意下伪类选择器LVHA伪类,样式按LVHA优先级顺序从右至左覆盖,不同的顺序会产生不同的效果。a:link-默认链接样式a:visited-已访问链接样式a:hover-鼠标悬停样式a:active-鼠标点击样式最后写下关于JS控制内联样式带!important的现象:看下正常的Demo1: 1 1
1 最终显示背景为红色,这应该不会有什么问题,!important放到哪都会改变优先级的,而后面的JS代码也不会改变优先级。另外一个D
6、emo2:1 6 1
1 IE6,7 显示 红色FF2+ 显示 黄色Opera9+ 显示 红色Safari 显示 黄色Demo3:1