首页 > 开发 > CSS > 正文

css的优先级和!important与ie6的BUG

2024-07-11 08:22:21
字体:
来源:转载
供稿:网友

一 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”的规则有最高优先级。

我们可以利用!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的文章,说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外其他都是正常的。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表