一 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. bzero与memset

    bzero:原型:void bzero(void *s, int n); 功能:置字节字符串s的前n个字节为零且包括‘\0’. 说明:bzero无返回值,并且使用strings.h头文件,string ...

  2. Asp.Net Web API 导航3

    Asp.Net Web API 导航   Asp.Net Web API第一课:入门http://www.cnblogs.com/aehyok/p/3432158.html Asp.Net Web A ...

  3. 包图Package

    [UML]UML系列——包图Package 系列文章 [UML]UML系列——用例图Use Case       [UML]UML系列——用例图中的各种关系(include.extend)       ...

  4. Python基础－类的探讨（class）

    Python基础-类的探讨(class) 我们下面的探讨基于Python3,我实际测试使用的是Python3.2,Python3与Python2在类函数的类型上做了改变 1,类定义语法  Python ...

  5. 关于在Java EE 下开发web，出现项目中的外部包没有tomcat的包的原因

    在新建的项目的时候,要设置目标服务器运行环境,把那个设置成tomcat,这样,项目中就会有tomca的api

  6. WEB安全入门

    WEB安全入门 信息安全基础 信息安全目标 真实性:对信息的来源进行判断,能对伪造来源的信息予以鉴别, 就是身份认证. 保密性:保证机密信息不被窃听,盗取,或窃听者不能了解信息的真实含义. 完整性:保 ...

  7. 关于MyEclipse SVN显示资源历史记录乱码问题

    使用SVN查看历史记录进行文件对比的时候,有时会出现乱码问题,如下图: 解决办法:打开Window-->Preferences 如下: 原来默认的是GBK,改为UTF-8即可

  8. jquery mobile扁平化设计样式--Jquery mobile Flat UI介绍

    jquery mobile扁平化设计样式--Jquery mobile Flat UI介绍 这几天开发的web app使用了jquery mobile,jquery mobile自带的样式比较适合做企 ...

  9. javascript的笔记

    好久没写东西了,最近有些迷茫(好吧,是借口),也是好久没有接触js的内容了,今天就借此契机,顺便复习下吧. 就看看javascript中的函数四大调用模式和this的关系 1.方法调用模式 当一个函数 ...

  10. HTTP协议 HttpWebRequest和 Socket的一点总结

    HTTP协议 HttpWebRequest和 Socket的一点总结 相信接触过网络开发的人对HTTP.HttpWebRequest.Socket这些东西都不陌生吧.它们之间的一些介绍和关系我这里都忽 ...