繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > css的优先级和!important与ie6的BUG
- CSS样式表
- 验证并修复css错误内容的相关工具
- 分享3个比较实用的CSS页面框架布局
- CSS幻灯片教程:制作高效可维护组件化的CSS代码
- 网页制作基础知识:html特殊符号
- CSS教程:按整洁易懂的结构组织CSS样式
- 查看和编辑CSS中用到的颜色:CSS Prism
- 帮助你学习CSS的在线CSS工具网站
- CSS网页设计参考:把HTML标记分类
- CSS进阶:几个Reset CSS的八卦问题
- WEB设计技巧:网页虚线制作方法剖析
- WEBJX收集CSS格式化和造型网页高级教程
- CSS3教程:在CSS中使用的颜色
- 学习WEB标准心得:网页重构的思路
- 轻易创建css导航工具:CSS Tab Designer2
- 总结学习web标准的十个重要理由
- CSS实例教程:CSS制作星级评价的功能
- CSS实例教程:纯CSS实现圆角框
- 多个css、js文件自动合并、压缩
- 网页设计教程:CSS文字排版技巧大全
- Photoshop制作CSS网页制作的背景图
CSS样式表 中的 css的优先级和!important与ie6的BUG
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-28 浏览: 44 ::
收藏到网摘: n/a
一 css的优先级
今天有人跟我说css hack中用!important来区分ie6，因为ie6不支持!important，是的在很早以前我也是用过这种方法写hack，但是后来就基本不用了。本来我对他谁的ie6不支持!important也没什么异议，可是正好在前几天正好用个这个!important属性解决了一个样式优先级的问题，而且是支持ie6的，这是为什么呢？到底ie6支不支持!important呢？
首先我们来看看!important这个属性的作用：!important是用来提升样式优先级的，我们知道样式是有优先级的。
我们先看看css的优先级的几个基本的规则：
- ID选择器(形如#id{}) > 类选择器(形如.class{}) > 标签选择器(形如body{}或者*｛｝)，也就是ID选择器，类选择器，标签选择器中，ID选择器的优先级最高，标签选择器最低；
- 选择器越具体优先级就越高，也就是
.classA .classB .classC{font-size: 25px;}
.classB .classC{font-size:18px}
.classC { font-size: 12px; }
这里.classA .classB .classC的优先级最高，.classC的优先级最低； - 在同一个级别的情况下，最后指定的规则优先级就越高，也就是我们通常说的就近原则；html中标签的style的属性都高于css文件中的选择器样式；
- 标有”!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外其他都是正常的。
评论 (0) All
