随笔-9  评论-49  文章-0  trackbacks-0

      很多人,包括很多网站(我所见过的所有网站,包括国内著名的‘网页设计师’网站),都说important是不被IE所支持和认识的,可是真的是这样吗?看了下边的两个例子,也许你会改变一些看法!


例一:

 
CSS

#box {
     color:red !important;
     color:blue;
 }


HTML

<div id="Box"> 在不同的浏览器下,这行字的色应该不同!</div>


          这个例子应该是大家经常见到的important的用法了,在IE环境下,这行字是蓝色,在firefox下,为红色,其用法不再多说了,看下一个例子。

例二:

CSS

1 #box div{
     color:red;
 }
2 .important_false{
     color:blue;
}
3.important_true{
     color:blue !important;
}

HTML
<div id="Box">
    
<div class="important_false">这一行末使用important</div>
    
<div class="important_true">这一行使用了important</div>
</div>

 
         例二中,CSS代码第一行设定了box里面所有div中字体色为红色,第二行和第三行都用class重新定义了自身div的字体色为蓝色,不同的是,第二行末使用important,而第三行使用了!

         默认情况下,class的优先级小于id,所以,第二行中即使用class重定义了自身样式,也无法生效,所以继承父级属性,这行字还是红色!

         但是,第三行中,用了important提升优先级(或看成强制重定义),所以这里的css得以生效,这行字变为了蓝色!

         从这个例子,得以证明,ie对important的并不是不支持!

            
那么为什么很多人都说ie不认识它呢?我想应该是大家实战中可能都没有遇到例子中的情况: 当你想提升class的优先级时怎么办?

           也就是说大家可能都忽略了它的这一作用,只了解在命名为同一个元素的CSS代码块中,用它来提升排列顺序相对靠前的代码的优先级(例一)!

        通过上边两个例子,得以总结:

        important对 一个良好(或者是标准)的浏览器来说,不仅仅是从顺序上提升代码的优先级,还可以用来提升class的优先级(比如firefox),但是从IE对前者的不支持可以看出,这只是IE的一大BUG,而不能说它“不认识、不支持”!

         然而,不管怎么样,IE的这一大BUG帮助我们解决了很多兼容性问题,这显然不是件坏事!
         
posted on 2006-03-09 03:19 Raven 阅读(7086) 评论(20)  编辑  收藏 所属分类: XHTML/CSS

评论:
# re: important终级讲解 2006-03-10 14:07 | 感恩的心
刚才试了试,第二个例子却和上面说的不一样,找了一会才发现原来是这样:
原来的
1 #box div{
color:red;
}
2 .important_false{
color:blue;
}
3.important_true{
color:blue !important;
}
比下面写的多了一个“div”!
#box {
color:red;
}
.important_false{
color:blue;
}
.important_true{
color:blue !important;
}
这时候的效果就和上面说的不一样了。这个时候字体颜色都是蓝色!并没有体现出优先级啊?  回复  更多评论
  
# re: important终级讲解 2006-03-11 03:59 | Raven
你知道#box div{...}这样写的含义吗?

是指,文档中,以box为ID的元素下边的所有标签名为div的元素!也就是说,它并不是来给box赋样式,而是给box下的那两个div赋样式!(让它俩的字为红色)

而你把div去了,那就是说这次是给box赋样式了,那么下面的div根本没有指定任何样式,所以按css的规定,靠近元素最近的样式将生效!

优先级是体现在,同一元素多次渲染的前提上,所以,你把div却了,这两个div上只有class的定义,不存在“多次”,也就不存在"优先级"了!
  回复  更多评论
  
# re: important终级讲解 2006-03-11 09:05 | h
hao  回复  更多评论
  
# re: important终级讲解 2006-12-07 20:35 | 虫子
IE7已经修复了这个缺陷,也就是现在的IE7,FF2.0,FF3.0等在这个问题上是在同一起跑线上!
既然IE和FF的盒子模型有区别,这样一来,反而不好区分开进行定义了!
那不是很郁闷。我的页面布局在IE和FF总是有那么1-2个PX的差异,头大了!  回复  更多评论
  
# re: important终级讲解 2006-12-13 12:46 | xinfan
奇怪,为什么我试了下,在IE6和firefox2.0 字体显示的都是蓝色??  回复  更多评论
  
# re: important终级讲解 2007-04-18 02:49 | Raven
@虫子
ie7 bate1仍然存在这个问题,也就是说,本篇文章适用于IE7 bate1-  回复  更多评论
  
# re: important终级讲解 2007-12-21 10:29 | yin
div的ID "Box"与css中的box首字母不一样,应同为大写或小写。  回复  更多评论
  
# re: important终级讲解 2009-06-27 16:12 | wenpeng sun
作者很有心,认真学习了,谢谢  回复  更多评论
  
# re: important终级讲解 2009-10-23 02:53 | momo's
我很无语

你第二个例子讲的完全就是错的

  回复  更多评论
  
# re: important终级讲解 2009-10-23 03:15 | momo's
那就对了@xinfan
  回复  更多评论
  
# re: important终级讲解 2009-10-25 22:35 | LeaChar
看到文章,我在佩服作者;
看到评论,我在思考自己。  回复  更多评论
  
# re: important终级讲解 2009-10-28 00:38 | Raven
@momo's
这篇文章虽然是我三年前写的,同时也发到蓝色理想相关论坛。至少目前为止,您是第一个提出它是错误的,很愿意与您就此问题学习。

请说明是哪里错了。  回复  更多评论
  
# re: important终级讲解 2009-10-31 11:27 | yytt
确实是Box"与css中的box首字母不一样,倒至例子不能功,支持作者  回复  更多评论
  
# re: important终级讲解 2009-11-27 09:40 | 68
importan不打了结  回复  更多评论
  
# re: important终级讲解 2009-11-27 09:41 | wow
不错 收藏 谢谢  回复  更多评论
  
# re: important终级讲解 2010-11-03 17:13 | Freetao
个人认为,!important 声明,除非必须,尽量少用。  回复  更多评论
  
# re: important终级讲解 2011-06-08 13:07 | jj
ie8好像是能识别important的,这样反而不好设置各个浏览器的显示样式了,怎么办呢?  回复  更多评论
  
# re: important终级讲解 2011-12-09 23:45 | FEer
id 大小写@xinfan
  回复  更多评论
  
# re: important终级讲解 2011-12-09 23:51 | FEer
1.第一个实例是不完全正确的,在IE7,8下面显示的是红色.
2.第二个实例的ID大小写问题.
3.最后一句话没有明白什么意思!
  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航:
博客园   IT新闻   Chat2DB   C++博客   博问