标题:
CSS中!important的作用
[打印本页]
作者:
飞翔的蜗牛
时间:
2011-12-20 11:01
标题:
CSS中!important的作用
{*rule !important}
这个
css
规则当今在网页制作的时候的普及已经非常流行了,以前我对它的理解就停留在
‘
浏览器是否识别阶段
’
而没有真正去研究过,可是现在发生了变化。众所周知,
!important
这个规则对
Ie6.0,Ie7.0
和
Firefox
能写
hack
,现在就来讲解这是什么原理:
*
对于
Ie
系列浏览器都能够识别,
firefox
浏览器则不能识别
;
!important
只有
Ie7.0
和
firefox
可以识别,但是
Ie6.0
不能成功应用
.
(1)
区别
ie
与
firefox
的
hack
为
:border:2px solid #f00;*border:1px solid #f00;
(2)
区别
Ie6.0
与
Ie7.0
、
firefox
的
hack
为
:border:1px solid #f00!important;border:2px solid #f00;
在
(1)
中,之所以把
*
放在后面是因为
ff
不识别
*
而导致只对它设置了一次
border;
而
ie
系列进行了两次
border
设置后,后一个属性覆盖了前一个属性,故为一像素的边框。
在
(2)
中,之所以把
!important
放在第一个
border
设置,是因为它把这次
border
的优先级提高了,即使
后面在一次甚至在
N
次设置
border
也无效,但是
Ie6.0
对这个规则不接受,而导致它应用了第二次的
border
设置,也就是第二次覆盖了第一次的这一原理, 并不是它不识别
!important;
所以它的
border
为
2
像素的红框
.
这是一个简单的应用:
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
无标题文档
</title>
<style type="text/css">
div{
width:800px;
height:250px;
background-color:yellow!important;/*
提升指定样式规则的应用优先权
*/
background-color:red;
border:3px solid #000!important;/*firefox*/
*border:5px solid #f00!important;/*Ie7.0*/
border:1px solid #000;/*Ie6.0*/
}
</style>
</head>
例一:
CSS
欢迎光临 CSS论坛 (http://www.divcss5.com/bbs/)
Powered by Discuz! 6.1.0