Css中!important的用法

2021-06-06 19:02

阅读:682

标签:注意   技术分享   box   char   tca   定义   als   .com   type   

!important为开发者提供了一个增加样式权重的方法。应当注意的是!important是对整条样式的声明,包括这个样式的属性和属性值

DOCTYPE HTML>
html>
head>
    meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    title>测试!Importanttitle>
head>
style type="text/css">
    #Box div
    {
        color: red;
    }
    .important_false
    {
        color: blue;
    }
    .important_true
    {
        color: blue !important;
    }
style>
body>
    div id="Box">
        div class="important_false">
            这一行末使用importantdiv>
        div class="important_true">
            这一行使用了importantdiv>
    div>
body>
html>

效果:

技术分享

CSS代码第一行设定了box里面所有div中字体色为红色,第二行和第三行都用class重新定义了自身div的字体色为蓝色,

不同的是,第二行未使用!important,而第三行使用了!

总结:

第一行字体颜色是红色,可以证明,css样式设置中,id的优先级大于class,这行字还是红色。

第二行字体颜色是蓝色,可以证明,!important的优先级最高,important_true的css样式生效,这行字变为了蓝色!


特别说明:

!important在IE6中是不被识别的,例:

.testClass{ 
    color:blue !important; 
    color
:red; }

这种写法在IE6下是识别不到的,.testCalss最后显示为红色,但也可以通过更改下写法让IE6识别到!important

.testClass{ 
    color:blue !important; 
} 
.testClass{ 
    color:red; 
}

 


Css中!important的用法

标签:注意   技术分享   box   char   tca   定义   als   .com   type   

原文地址:http://www.cnblogs.com/cang12138/p/7326280.html


评论


亲,登录后才可以留言!