今天小编跟大家讲解下有关css样式优先级及层叠的顺序排序探讨 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css样式优先级及层叠的顺序排序探讨 的相关资料，希望小伙伴们看了有所帮助。
一般情况下： [1位重要标志位] > [4位特殊性标志] > 声明先后顺序 !important > [ id > class > tag ] 使用!important可以改变优先级别为最高 其次是style对象 然后是id > class >tag 另外 另外在同级样式按照申明的顺序后出现的样式具有高优先级。 先来看下!important 这个诡异的东西 复制代码代码如下: <style type="text/css"> div{background: red !important; background: blue} </style> 除了IE6 其他浏览器都会显示背景为红色 正是!important的作用 意思就是只要我在这里我就是最重要的啦 任何东西都不能取代我 没看见都是一个 ！外加一个英文单词 important 吗 很形象 很贴切了。IE6这里会显示背景为蓝色 并不是IE6不支持!important 而是它会按照样式声明顺序后出现的覆盖前面的 此时它已经不认识!important了 它六亲不认了。这正是广为流传的IE6 hack之一。而如果这样写会正常显示背景为红色： 复制代码代码如下: <style type="text/css"> div{background: blue; background: red !important; } </style> 再来看下4位特殊性标志 [0.0.0.0] 从左至右 每次给某一个位置+1 前一段对后一段具有无可辩驳的压倒性优势。无论后一位数值有多大永远无法超过前一位的1。 1 内联样式 [1.0.0.0] A：<span id="demo" style="color:red "></span> B：还有就是JS控制的内联样式style对象 document.getElementById("demo").style.color="red"; 这两者属于同一级别 不过一般情况是JS控制的内联样式优先级高 这与先后顺序申明有关系与本质无关 因为往往DOM操作是在DOM树加载完毕之后。 2 ID选择器 [0.1.0.0] 3 类 属性 伪类 选择器 [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： 复制代码代码如下: <style type="text/css"> div{background: red !important; height:20px;} #demo1{ background: green;} .demo1{ background:blue;} </style> 复制代码代码如下: <div class="demo1"id="demo1"style="background: yellow"></div> 复制代码代码如下: <script type="text/javascript"> document.getElementById("demo1").style.background="black"; </script> 最终显示背景为红色 这应该不会有什么问题, !important 放到哪都会改变优先级的 而后面的JS代码也不会改变优先级。 -------------------------------------------------------------------------------- 另外一个Demo2: 复制代码代码如下: <style type="text/css"> div{background: red !important; height:200px;} #demo2{ background: green;} .demo2{ background: blue;} </style> 复制代码代码如下: <div class="demo2"id="demo2"style="background: yellow !important"></div> 复制代码代码如下: <script type="text/javascript"> document.getElementById("demo2").style.background="black"; </script> IE6,7 显示 红色 FF2+ 显示 黄色 Opera9+ 显示 红色 Safari 显示 黄色 -------------------------------------------------------------------------------- Demo3: 复制代码代码如下: <style type="text/css"> div{background: red !important; height:200px;} #demo3{ background: green;} .demo3{ background: blue;} </style> 复制代码代码如下: <div class="demo3"id="demo3"style="background: yellow !important"> </div> 复制代码代码如下: <script type="text/javascript"> document.getElementById("demo3").style.background="black !important"; </script> IE6,7 显示红色 FF2+ 显示黄色 Opera9+ 显示黑色 Safari 显示黑色 -------------------------------------------------------------------------------- 解释下上面两个例子： JS控制的style对象 实际就是内联样式style 这个没错 但是对于 JS控制style对象属性值里增加的!important 三个浏览器却给出了不同的结果： IE：JS控制style对象属性值完全覆盖内联style属性值 不支持Element.style.property="value !important" 将报错:参数无效。 FF2+：不完全支持Element.style.property="value !important" : !important无效 不会报错, 如果内联style属性值无!important 则完全覆盖 有!important 则内联style属性优先级最高 不会受JS控制style的任何影响。 Opera9+ ：JS控制style对象属性值完全覆盖内联style属性值 支持Element.style.property="value !important"。 Safari：支持Element.style.property="value !important" 如果内联style属性值无!important 则完全覆盖 有!important 则内联style属性优先级最高 不会受JS控制style的任何影响。 css样式优先级是按照样式表中出现顺序还是按照元素中class或者id值的声明顺序呢 以前一直以为是class中声明的迟的值优先级高 其实是根据样式表中出现的顺序来的。 代码： 复制代码代码如下: <style type="text/css"> div{ height: 200px; width: 200px; background: red; } .b{ background: green; } .a{ background: blue;} </style> </head> <body> <div class="a b"2style="background:pink;"> </div> </body> div的样式会显示blue的样式颜色。 学透前端行业所有技术 玩遍北京周边所有城市。然后我会回到那个生我养我的地方 因为有亲人的地方才是家。来源：爱蒂网
