css的优先级及!important在IE6下的一个BUG[2009年8月1日更新]

一 css的优先级

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

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

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

  1. ID选择器(形如#id{}) > 类选择器(形如.class{}) > 标签选择器(形如body{}或者*{}),也就是ID选择器,类选择器,标签选择器中,ID选择器的优先级最高,标签选择器最低;(转载请注明出处:WEB前端开发 https://www.html.cn/)
  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又是怎么回事呢?(转载请注明出处:WEB前端开发 https://www.html.cn/)

原来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外其他都是正常的。

赞(0) 打赏
未经允许不得转载:WEB前端开发 » css的优先级及!important在IE6下的一个BUG[2009年8月1日更新]

评论 10

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    这个,好文啊,原来还有这样的bug…

    神飞10年前 (2009-08-01)回复
  2. #-48

    IE6…. 又爱又恨啊~~~

    非洲我最白10年前 (2009-08-01)回复
  3. #-47

    想法有误,IE6同一个大括号里面只认识最后得一个值{font-size: 68px !important; font-size: 12px; font-size: 18px; font-size: 20px}就是20px,不支持!important是这个意思

    css10年前 (2009-08-07)回复
  4. #-46

    – – feed无格式,难道是摘要输出

    bigCat10年前 (2009-08-09)回复
  5. #-45

    我以前也在ie6下面用过

    JH.L9年前 (2009-10-07)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏