新手站长论坛

 找回密码
 注册会员

QQ登录

只需一步,快速开始

阿里云优惠                阿里云1折活动进行中                 免费领取阿里云代金券800元
查看: 2830|回复: 10

css优先级和!important与ie6的BUG

  [复制链接]
发表于 2010-3-28 10:14 | 显示全部楼层 |阅读模式
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代码:


我要20像素的字

我们知道根据上面的规则可以看出#idA{font-size:20px}的样式将被引用,那我们如果要12像素的字呢?

CSS代码:
#idA{font-size:20px}
.classA{ font-size: 12px !important; }

HTML代码:


我要12像素的字

这样.classA{ font-size: 12px !important; }这个样式就被引用了。

这种方法在优先级低的样式被优先级高的样式覆盖,又想引用优先级低的样式时候非常有用!

二  !important在ie6下的一个BUG

还是看这一段代码,

CSS代码:
#idA{font-size:20px}
.classA{ font-size: 12px !important; }

HTML代码:


我要12像素的字

大家可以在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代码:


我要12像素的字

这里在ie6下是12像素的字,而其他浏览器下是68px的字,当然我们把样式改一下,!important放在后面,即.classA{ font-size: 12px;font-size: 68px !important; },那么ie6下和其他浏览器一样也是68px的字。也就是在同一个选择器样式(即同一个大括号里面)下!important被ie6彻底的无视了。
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2010-7-3 09:52 | 显示全部楼层
已阅................顶顶...............
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2011-5-3 17:42 | 显示全部楼层
学习一下的!
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2011-5-29 15:31 | 显示全部楼层
顶一下,不错不错....
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2011-11-10 18:36 | 显示全部楼层
学习中 不错 很好的教程
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2011-11-11 14:48 | 显示全部楼层
我也来看了,很不错,收藏了
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2011-11-13 10:10 | 显示全部楼层
希望大家发表自己的看法!我先赞成一下
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2011-11-14 16:01 | 显示全部楼层

大家看怎么样 我认为很好.
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2012-1-10 16:40 | 显示全部楼层
我就来看看,顶顶贴!!
此贴必火,不解释~~~~~~~~~~
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2015-4-26 14:45 | 显示全部楼层

我就来看看,顶顶贴!!
此贴必火,不解释~~~~~~~~~~
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2015-4-27 15:05 | 显示全部楼层
这样的分享还是很不错
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
发表于 2019-8-22 16:36 | 显示全部楼层
路过,进来看看,感谢 楼主的分享,支持一下,继续加油哟!
欢迎你和我在新手站长论坛(http://www.cnzhanzhang.com)上相互交流和学习。
您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

基础教程 HTML(网页制作基础课) Dreamweaver(网页制作课程) CSS基础知识视频教程 Photoshop(作图基础课) 进阶教程 SEO教程 PHP教程 ASP教程 JavaScript
分步教程: 域名注册教程 空间购买教程 域名解析教程 网站备案教程 域名绑定教程 上传下载教程 思路方法: 菜鸟起步教程 通用建站思路 新手建站过程 本地免费空间
实例教程 Discuz(论坛) Phpwind(论坛) ECshop(网店) Shopex(网店) Dedecms(文章资讯) PHP168(文章资讯) 114la(网址导航) uchome(交友) Wordpress(博客) | 更多
特色板块: 新手站长交流(注册后即可发帖) 数据百度大课堂授课内容 cnzhanzhang学院 站长在线答疑(建站问题免费解答) 建站教程学习区 发外链 发广告 seo交流站长群

QQ|广告报价|Archiver|手机版| 新手站长网 ( 豫ICP备14019290号 )

GMT+8, 2020-10-23 09:48 , Processed in 0.082444 second(s), 21 queries .

Powered by Discuz! X1.5

Copyright © 2007-2020, yuntaokeji.com.

快速回复 返回顶部 返回列表