当前位置:

首页 > 编程开发 > 详解CSS样式中的!important、*、_符号

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

本文目录

    CSS中的感叹号important、星号、下划线是浏览器兼容技巧:感叹号important在IE6内联样式中无效,但在其他浏览器有效;星号被IE全系列浏览器识别;下划线仅被IE6识别。这些技巧仅用于调试阶段,专业做法是使用JavaScript判断浏览器特征并动态加载相应样式。

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

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

    看这个例子:

            !Important       
    呵呵

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

    详解CSS样式中的!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;

    拿下面这段代码来验证:

            !Important       
    区分IE7、IE8、火狐
    区分IE7、IE8、火狐

    实际渲染效果如下:

    (1)IE7

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

    (2)IE8 及以上,以及 Firefox 等标准浏览器

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

    (3)IE6

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

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

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

    测试Css中的Important

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