脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > 心得技巧 >

css样式优先级及层叠的顺序排序探讨

  发布时间：2013-03-14 10:06:09   作者：佚名   我要评论
css样式优先级是按照样式表中出现顺序还是按照元素中class或者id值的声明顺序呢，这个问题貌似一直存在我们身边却一直无从选择，接下来用实例为大家说明下，到底哪个高点，感兴趣的你可不要错过了哈
一般情况下：
[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的样式颜色。
学透前端行业所有技术，玩遍北京周边所有城市。然后我会回到那个生我养我的地方，因为有亲人的地方才是家。

相关文章

  • CSS选择器种类、优先级与匹配原理详解

    作为一个Web开发者，掌握必要的前台技术也是很重要的特别是CSS选择器的优先级问题，为了广大web爱好者可以更好的解决问题，这里就CSS选择器的优先级问题做了一些总结
    2013-08-01

  • CSS控制样式的三种方式(优先级对比验证)

    大家都知道，CSS的中文名叫做层叠样式表，而CSS在控制样式的时候，有三种引入方式,这里简单介绍下CSS控制样式的三种方式
    2013-07-22

  • CSS优先级的相关知识详细介绍

    所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序，既然样式有优先级，那么就会有一个规则来约定这个优先级，而这个“规则”就是本次所需要讲的重点
    2013-04-22

  • 网页css优先级为您详细解读

    所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序，CSS是层叠样式表（Cascading Style Sheets）的简称，我们能通过CSS为文档设置丰富且易于修改的外观
    2013-04-19

  • CSS层叠样式表之CSS解析机制的优先级及样式覆盖问题探讨

    多重样式（Multiple Styles）： 如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况.有个例外的情况，就是如果外部样式放在内部样式的后面，则
    2013-02-01

  • CSS优先级和!important与IE6的BUG讨论及解决方案

    本来我对他谁的ie6不支持!important也没什么异议，可是正好在前几天正好用个这个!important属性解决了一个样式优先级的问题，而且是支持ie6的，这是为什么呢？到底ie6支不
    2013-01-23

  • IE6下CSS多类选择符优先级不起作用的bug分析及解决方法

    IE6，这个前端开发的梦魇总是在你不经意的时候给你捅一刀,在ie6环境下CSS多类选择符优先级不起作用，多么的令人气愤啊，经过测试：IE6下这种类组合的优先级不如单个类， 感
    2013-01-23

  • css样式的优先级究竟庞杂到什么程度

    css样式的优先级是一个庞杂的知识点，我甚至觉得它的庞杂可以与“浮动”以及“框模型”相提并论,今天就利用点时间把我所了解的写下来，大家共同进步
    2013-01-11

  • css选择器优先级深入理解

    css基础选择器有标签选择器、类选择器、id选择器、通用选择器,本文将深入介绍css选择器优先级,这会给正在解决优先级问题的朋友，带来些许帮助
    2012-12-04

  • 同级情况下CSS的优先级探讨

    CSS的调用方式一共有4种，分别是：行内样式，内嵌式，link链接式，@import导入式，在同级的前提下，我们可以按样就近原则来理解他们的优先级，则越前定义的样式，会被后面
    2010-07-23

最新评论

关注微信公众号

扫一扫