一 css的优先级

今天有人跟我说css hack中用!important来区分ie6，因为ie6不支持!important，是的在很早以前我也是用过这种方法写hack，但是后来就基本不用了。本来我对他谁的ie6不支持!important也没什么异议，可是正好在前几天正好用个这个!important属性解决了一个样式优先级的问题，而且是支持ie6的，这是为什么呢？到底ie6支不支持!important呢？

首先我们来看看!important这个属性的作用：!important是用来提升样式优先级的，我们知道样式是有优先级的。

我们先看看css的优先级的几个基本的规则：

  1. ID选择器(形如#id{}) > 类选择器(形如.class{}) > 标签选择器(形如body{}或者*｛｝)，也就是ID选择器，类选择器，标签选择器中，ID选择器的优先级最高，标签选择器最低；
  2. 选择器越具体优先级就越高，也就是
    .classA .classB .classC{font-size: 25px;}
    .classB .classC{font-size:18px}
    .classC { font-size: 12px; }
    这里.classA .classB .classC的优先级最高，.classC的优先级最低；
  3. 在同一个级别的情况下，最后指定的规则优先级就越高，也就是我们通常说的就近原则；html中标签的style的属性都高于css文件中的选择器样式；
  4. 标有”!important”的规则有最高优先级。

更多详细规则和可以查看http://www.cssforest.org/faq/topic/view/19.html

我们可以利用!important使该样式优先级最高，例如：

CSS代码：
#idA{font-size:20px}
.classA{ font-size: 12px; }

HTML代码：
<div id=“idA” class=“classA”>我要20像素的字</div>

我们知道根据上面的规则可以看出#idA{font-size:20px}的样式将被引用，那我们如果要12像素的字呢？

CSS代码：
#idA{font-size:20px}
.classA{ font-size: 12px !important; }

HTML代码：
<div id=“idA” class=“classA”>我要12像素的字</div>

这样.classA{ font-size: 12px !important; }这个样式就被引用了。

这种方法在优先级低的样式被优先级高的样式覆盖，又想引用优先级低的样式时候非常有用！

二  !important在ie6下的一个BUG

还是看这一段代码，

CSS代码：
#idA{font-size:20px}
.classA{ font-size: 12px !important; }

HTML代码：
<div id=“idA” class=“classA”>我要12像素的字</div>

大家可以在IE6下测试一下，文字是12像素的，也就是.classA{ font-size: 12px !important; }被引用了，这证明IE6是支持!important的。但是css hack中用!important来区分ie6，说ie6不支持!important又是怎么回事呢？

原来ie6下，在同一个选择器样式（即同一个大括号里面）下!important是无效的，例如：

css代码：
.classA{ font-size: 68px !important; font-size: 12px }

HTML代码：
<div class=“classA”>我要12像素的字</div>

这里在ie6下是12像素的字，而其他浏览器下是68px的字，当然我们把样式改一下，!important放在后面，即.classA{ font-size: 12px;font-size: 68px !important; },那么ie6下和其他浏览器一样也是68px的字。也就是在同一个选择器样式（即同一个大括号里面）下!important被ie6彻底的无视了。

==============以下2009年8月1日更新==============

昨天在紫鼠的博客上也看到了关于!important的文章（http://www.hezc.com/article.asp?id=86），说IE8在同一个选择器样式（即同一个大括号里面）下对!important的解析也是和IE6一样的，可是我测试的情况是IE8和IE6是不一样的，并留了言，今天我们讨论了这个问题，确实他写的他写的代码IE8和IE6对!important的解析是一样的。经过比较发现，他代码上没有DTD的声明，就是html代码上面的这一句：“<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>”，神啊，在没有DTD的声明的情况下，在同一个选择器样式（即同一个大括号里面）下，IE6，IE7，IE8对!important的解析都是无效的。还有只要有声明文档类型的不管是html4，xhtml1.o，还有html5（“<!DOCTYPE html>”），除去ie6有上面说的BUG外其他都是正常的。

转载请注明转自《css的优先级及!important在IE6下的一个BUG》

【IE6的疯狂之十一】CSS的优先级及!important在IE6下的BUG的更多相关文章

  1. 【IE6的疯狂之十】父级使用padding后子元素绝对定位的BUG

    在前端开发中,经常会用到css的position:absolute来使层浮动,前通过left,top,right等属性来对层进行定位,但ie6对left,top,right等属性的解释和ie7,ie8 ...

  2. css的优先级以及!important的使用

    CSS的优先级应该是作为CSS基本知识而广为知道的,所以CSS入门后,就一直把CSS的优先级记挂在心里(自觉告诉自己这地方很可能会摔跤).起初可能是因为自己的项目经验不够丰富,或者是自己所接触到的项目 ...

  3. 关于Css选择器优先级

    今天练习css的时候,重叠后的style发现不起作用,原来css选择器优先级大有文章. 声明: yi下内容选自 51cto.com  --加以自己的理解 以备日后参照使用,毕竟自己理解的才是自己的. ...

  4. 兼容IE6/IE7/IE8/FireFox的css hack

    兼容IE6/IE7/IE8/FireFox的css hack .color{ background-color: #CC00FF; background-color: #FF00009; *backg ...

  5. 【IE6的疯狂之八】链接伪类（:hover）CSS背景图片有闪动BUG

    IE6下链接伪类(:hover)CSS背景图片有闪动BUG,主要原因ie会再一次请求这张图片,或者说图片没被缓存. 例如: CSS代码 a:hover{background:url(imagepath ...

  6. CSS样式优先级

    关于CSS样式优先级 一般情况下: [1位重要标志位] > [4位特殊性标志] > 声明先后顺序 !important > [ id > class > tag ] 使用 ...

  7. 转载css层级优先级。

    解读CSS样式优先级(修改门户自定义样式必读) 一.什么是CSS优先级?所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序.当同一个元素(或内容)被多个CSS选择符选中时,就要按照优先权取舍 ...

  8. CSS的优先级规则

    CSS的优先级规则有两类 1.位置群组规则 最高优先级为元素内嵌的style样式,如<div style=” “></div> 次高优先级为html头部中的<style& ...

  9. 关于CSS样式优先级

    一般情况下: [1位重要标志位] > [4位特殊性标志] > 声明先后顺序 !important > [ id > class > tag ] 使用!important可 ...

随机推荐

  1. exit与_exit

    一.main函数: 先从程序的执行开始谈起,C程序总是从main函数开始执行,当内核执行C程序时(使用了一个exec函数),在调用main函数前先调用一个特殊的启动例程.可执行程序 文件将此启动例程指 ...

  2. WebForm页面生命周期WEBFORM_ASPNET控件树的生成和作用

    WebForm页面生命周期WEBFORM_ASPNET控件树的生成和作用 摘要 页面类是如何结合后台文件类生成整个页面的HTML的代码和后台输出的代码输出到浏览器中呢?这就牵扯到Asp.net页面生命 ...

  3. 公众平台Bee.WeiXin

    微信公众平台Bee.WeiXin开发介绍 阅读目录 开始 预览 配置项说明 调用链方式的应答 理解调用链上下文 自定义MVC响应 总结 我们来看一下如何通过Bee.WeiXin开发微信公众平台.关于微 ...

  4. cocos2d（背景图片循环滚动）

    背景图片循环滚动 使用action 实现的: 主要有两个背景图片交替循环滚动:我选的两个背景图片的宽度都是1024的 ,所以定义了#define BGIMG_WIDTH 1024 代码如下: 在Hel ...

  5. Jquery文本框值改变事件（支持火狐、ie）

    Jquery值改变事件支持火狐和ie浏览器,并且测试通过,绑定后台代码可以做成autocomplete控件. 具体代码列举如下: $(document).ready(function () { $(& ...

  6. K-Means算法

    K-Means算法 K-Means算法的输入N,K和一个size为N的向量组vector.输出K个两两互不相交的向量组.其本质是将给定的向量组划分成K个类别,使得同类别的向量相似度比较大,而不同类别的 ...

  7. 一键保存网页为PDF

    一键保存网页为PDF_V1.2   福利来了,“一键保存网页为PDF”发布以来最给力的功能来了: 1.支持大部分浏览器了(添加书签方式),测试IE8\IE9.谷歌.火狐可用: 2.转换组件“ephtm ...

  8. Linux操作系统学习_用户态与内核态之切换过程

    因为操作系统的很多操作会消耗系统的物理资源,例如创建一个新进程时,要做很多底层的细致工作,如分配物理内存,从父进程拷贝相关信息,拷贝设置页目录.页表等,这些操作显然不能随便让任何程序都可以做,于是就产 ...

  9. Linux下SSH+Firefox

    Linux下SSH+Firefox 简明FQ攻略 FQ的软件有很多,楼主原来在Windows下用过Tor(洋葱头).Puff.freegate等,一般只需要打开FQ软件,简单的设置后就可以FQ浏览了. ...

  10. Linux centOS本地DNS安装

    centOS本地DNS安装 在centOS里最常用的DNS服务工具应该是bind了.下面就以bind为例做一个DNS服务. 首先查看bind 是否已经安装 Rpm -qa | gerp bind 如果 ...