CSS !important的用法和效果

在 CSS（层叠样式表）中，!important 的作用是提高 CSS 样式规则的优先级。

例如：
#box{
    width: 200px;  /* 无效 */
    width: 300px !important;  /* 有效 */
}
#box{
    width: 300px !important;  /* 有效 */
    width: 200px;   /* 无效 */
}
#box{
    width: 300px !important;   /* 有效 */
}
#box{
    width: 200px;  /* 无效 */
}
说明：不管是 !important 所在属性与其他相同属性的书写的位置或是分离式书写（即重新定义选择器），浏览器都按 !important 所在属性渲染页面。
但是，在 IE6 中存在 bug，其不完全支持 !important 提高样式规则的优先级，!important 的书写位置会影响浏览器渲染，分离式的书写方式则不存在这个问题。

例如：

在IE6中定义：
#box{
    width: 300px !important;  /* 无效 */
    width: 200px;  /* 有效 */
}
说明：在 IE6 中，如果具有 !important 的属性后再定义相同属性，会忽略 !important 所在属性，而渲染后定义的属性的值。

总结：
    IE6 的这个 bug 也可以作为 IE6 的专用 hack，可以用来解决一些浏览器之间的兼容性问题。