一 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. Asp.Net Web Api 与 Andriod 接口对接开发

    Asp.Net Web Api 与 Andriod 接口对接开发经验,给小伙伴分享一下!   最近一直急着在负责弄Asp.Net Web Api 与 Andriod 接口开发的对接工作! 刚听说要用A ...

  2. vector cin

    vector<int>vec1,vec2; int ival; cout<<"Ender numbers for vector1(-1 to end):"& ...

  3. MongoDB学习（翻译6）

    接上篇.... 字段或属性层次的序列化选项 有许多种让你控制序列化的方式,上一节通过约定方法来控制序列化,你也可以通过代码配置或者成员映射或者使用特性来控制你的序列化,下面说道的序列化的各个方面,我们 ...

  4. C++ 动态库导出函数名“乱码”及解决

    C++ 动态库导出函数名“乱码”及解决 刚接触C++,在尝试从 dll 中导出函数时,发现导出的函数名都“乱码”了. 导出过程如下: 新建一个Win32项目: 新建的解决方案里有几个导出的示例: // ...

  5. ajaxFileUpload+struts2实现多文件上传(动态添加文件上传框)

    上篇文章http://blog.csdn.net/itmyhome1990/article/details/36396291介绍了ajaxfileupload实现多文件上传, 但只是固定的文件个数,如 ...

  6. ios学习笔记（二）之Objective-C类、继承、类别和协议

    二:Objective-C类与继承和协议 在前面已经提过了对象的初始化,这里首先讲的是变量. 2.1 变量 局部变量(内部变量): 局部变量是在方法内作定义说明的,其作用域仅限于方法内,离开方法后使用 ...

  7. Lambda应用模式

    Lambda应用模式 前言 在使用 Lambda 表达式时,我们常会碰到一些典型的应用场景,而从常用场景中抽取出来的应用方式可以描述为应用模式.这些模式可能不全是新的模式,有的参考自 JavaScri ...

  8. 64位CentOS 6.0下搭建LAMP环境

    系统环境:Centos6.0 x64 1.确认搭建LAMP所需要的环境是否已经安装 [root@centos6 ~]# rpm -q make gcc gcc-c++ zlib-devel libai ...

  9. hdu 2828 Buy Tickets（线段树）

    一道不算复杂的线段树,就是数据处理需要好好想一下. 将输入的所有数据从后往前输入,对于最后一个值,如果它想插入第i个位置,那么他就必须在前面留下i-1个位置.对于倒数第二个人,如果他想插入j位置,那么 ...

  10. 【详细贴】Ubuntu Linode搭建海外策略路由VPN IPSec+L2TP（一）

    对于码农来说,Google上搜索,stackoverflow上提问,twitter上交流,这样的国际化开放平台才是码农成长的空间.但是,目前遇到的一些现实的困难,无可避免的带来一些麻烦,不过这难不倒我 ...