详解CSS样式中的!important、*、_符号

CSS 里的 !important、*、_ 这几个符号，说实在的，日常开发中并不建议拿来作为优先级控制的主力——你完全可以通过合理的样式排列顺序来搞定大部分冲突。但作为前端工程师，你至少得能看懂它们，因为历史代码里总会出现这些“黑魔法”。

先聊聊优先级的基本规则：我们都知道，写在 .css 文件里的样式，优先级低于直接写在元素 style 属性里的样式。不过一旦 !important 登场，这个规则就得重新掂量了。

看这个例子：

               
     呵呵   
  

按理说，color:red 写在后面，应该覆盖前面的 color:blue，文字显示为红色。但 color:blue 后面加了个 !important，它的优先级瞬间拉到最高，所以最终“呵呵”两字显示为蓝色。效果如下：

不过有个坑：IE6 并不能识别 style 属性中的 !important，所以它在 IE6 里会忽略这个“最高指示”，仍然按照原有顺序，把文字渲染成红色。

这三个符号各自服务于不同的老浏览器阵营，具体来说：

• *：IE 全系列都能识别；标准浏览器（比如 Firefox）不认识它。
• !important：IE7+ 能识别，Firefox 也能识别，但 IE6 不认识（仅限 style 属性中）。
• _（下划线）：只有 IE6 能识别，IE7 和 Firefox 都不认识。

利用这个特性，我们可以在一条样式里同时定义三份值，分别针对不同浏览器：

background:orange;*background:green;_background:blue;

也可以换一种写法：

background:orange;*background:green !important;*background:blue;

拿下面这段代码来验证：

               
     区分IE7、IE8、火狐   
   
     区分IE7、IE8、火狐   
  

实际渲染效果如下：

（1）IE7

（2）IE8 及以上，以及 Firefox 等标准浏览器

（3）IE6

说实话，这类 hack 只能作为调试时的权宜之计。真正专业的做法，还是用 Ja vaScript 来做浏览器类型判断，再动态加载对应的样式。

最后补充一点：上面提到的“IE6 不能识别 !important”仅限于内联 style 属性。如果写在

不论 IE6 还是 IE10、Firefox、Chrome，结果都一样——文字显示为蓝色。因为在