一 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. 解决Xcode升级7.0后，部分.a静态库在iOS9.0的模拟器上，link失败的问题

    简单描述一下这个问题:我们项目中使用了Google大神开发的LevelDB键值对数据库,在Xcode6,iOS8的环境下,编译好的.a静态库是可以正常使用的.但是升级后,发现在模拟器上无法link成功 ...

  2. 从网络上获取图片并保存在sdCard上

    package com.aib.soft; import java.io.BufferedOutputStream; import java.io.File; import java.io.FileO ...

  3. JAVA算法两道

    算法(JAVA)----两道小小课后题   LZ最近翻了翻JAVA版的数据结构与算法,无聊之下将书中的课后题一一给做了一遍,在此给出书中课后题的答案(非标准答案,是LZ的答案,猿友们可以贡献出自己更快 ...

  4. ASP.NET MVC 之Model的呈现

    ASP.NET MVC 之Model的呈现(仅此一文系列三) 本文目的 我们来看一个小例子,在一个ASP.NET MVC项目中创建一个控制器Home,只有一个Index: public class H ...

  5. jsp中获取当前文件路径

    <% String path1 = application.getRealPath(request.getRequestURI()); //当前请求的JSP文件的物理路径 String path ...

  6. SVN中Branch的创建于合并

    SVN中Branch的创建于合并 在使用源代码版本控制工具时,最佳实践是一直保持一个主干版本.但是为了应付实际开发中的各种情况,适时的开辟一些分支也是很有必要的.比如在持续开发新功能的同时,需要发布一 ...

  7. 相对于C#，PHP中的个性化语法

    相对于C#,PHP中的个性化语法 背景 今天把PHP的基本语法结构熟悉了一下,包括:变量.类型.常量.运算符.字符串.作用域和函数等,本文列举一些我需要强化记忆的结构(和C#不同). 一些个性化的结构 ...

  8. 为什么不能在子类或外部发布C#事件

    为什么不能在子类或外部发布C#事件 背景 一个朋友问了一个问题:“为什么不能在子类或外部发布C#事件?”,我说我不知道,要看看生产的IL代码,下面我们看看. 测试 代码 1 using System; ...

  9. 最简单的linux内存清理方法

    vmstat -s 查看剩余内存 然后用一下命令清理内存 echo 1 > /proc/sys/vm/drop_caches

  10. 浅析CDN存在的必要性

    CDN行业从出现至今,已经有近20年的历史.但是直到近些年互联网进入超高速发展阶段,CDN才得以得到更广泛的应用和发展.最开始,CDN的主要任务只是简单的内容分发,对于静态内容的加速没有问题.但是随着 ...