css指！important

本文转自：http://www.kuqin.com/webpagedesign/20080513/8443.html

看了群博客上balibell说的“‘!important’ 在同一条样式定义中即大括号{}中，firefox、opera优先认领，ie不认得即忽略’!important’字符串。在非同一条样式中即不同的大括号中{}标有‘!important’的样式对所有浏览器均属优先认领。网上有说ie不认‘!important’的，大错特错了。”看来自己也是这么错误地过来了。难怪今天改css的时候，我只想针对firefox来做一个padding-bottom，就写了个.class{padding-bottom:6px !important;}可是却没有效果呢。看来网上也不能全信啊。

原来css在同一个大括号内是让firefox优先认领，也就是说只有在同一括号内定下两个样式的时候ie不得不忽略掉它，而不是像网上大多介绍的那样直接忽略。其实!important还有保护的作用，在任何需要保护的属性后面插入它可以避免被基于特性的属性覆盖。例如：#nav a{color:red;} a{color:teal !important},通常，一个带有id名#nav的元素里的一个链接会变设设位红色，因为这个#nav a比标签样式具体的多，但因为包含了！important，以为则会这个属性永远胜出。

这样，对!important的理解也就更深入了。
哦，这样叫!important才对么。
另再补充下css的优先级，一个标签选择器1分，一个类选择器10分，一个id选择器100，一个行内样式1000，！important就当无限分吧，呵呵。分值相同时按后出现优先的原则算，ok.

 

 

举个例子：

body{
  background:url(./or1.jpg) repeat-x scroll center center !important;
  background:url(./or2.jpg) repeat-x scroll center center;
}
这样ie浏览器的background将是or2.jpg，而非ie的将是or1.jpg

 

但是

body{
  background:url(./or1.jpg) repeat-x scroll center center !important;
}

body{
  background:url(./or2.jpg) repeat-x scroll center center;
}

则将发挥!important的最高特殊性，任何浏览器的bg都将为or1.jpg