CSS中!important的作用

用以下简单例子来说明css使用!important的不一样

<style>
#a{ color:#0C0;}
.b{color:red !important;}
</style>
<table border="1">
 <tr id='a' style="color:#6FF;">
 <td class="b">bbbbbbbbb</td>
 <td>aaaaaaaaaaa</td>
 <td style="color:#36F">ccccccccccc</td>
 <td class="b" style="color:#36F">dddddddd</td>
 
 </tr>
</table>

它可以覆盖无论id或class定义的样式,兼容在ie6及以上版本,Firefox和Chrome表现都是一致的。
但是ie6有bug,如果写成下面的样式,ie6是识别不出来的:

.b{
 color:red !important;
 color:yellow;
}

这样,在ie6下展示的时候会显示成黄色。

当然,也可以通过以下方式来让ie6识别:

.b{
  color:red !important;
}
.b{
  color:yellow;
}

注意书写方式一般可以避开的问题。

此条目发表在开源代码分类目录,贴了标签。将固定链接加入收藏夹。

发表回复