• CSS的!important修改权重


    !important语法和描述

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

    #example {
      font-size: 14px !important;    
    }
    
    #container #example {
      font-size: 10px;
    }    

    实例说明:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
        .div1 {
            color: red !important;
            /*color: red;*/
        }
        
        #div1 {
            color: blue;
            font-weight: bold;
        }
        </style>
    </head>
    
    <body>
        <div class="div1" id='div1' style='color:green;'>
            <p>div1内容</p>
            <span>span中的内容</span>
        </div>
    </body>
    
    </html>
    View Code

    实例总结:

    1.!important会修改当前对应元素的当前css属性和值得权重

    2.!important指定的属性权重比class选择器,ID选择器,内联样式的权重都高。

    3.!important只对当前元素当前属性权重有影响,对子元素权重没影响

    4.如果在在不懂选择器中,相同属性和值都指定了!important,选择器权重高的属性起作用

    例如:

        .div1 {
            color: red !important;
        }
        
        #div1 {
            color: blue !important;
        }

    浏览器解析结果,div中颜色为蓝色。

    关于!important应该注意的一些地方:

    1.  当!important第一次在CSS1中被介绍时是这样规定的,即一个由开发者声明的!important样式要比一个由用户声明的!important样式获得更大的权重。为了提高访问性,在CSS2 中它被颠倒了过来。
    2.  如果!important被用于一个简写的样式属性,那么这条简写的样式属性所代表的子属性都会被作用上!important。
    3.  关键字!important必须放在一行样式的末尾并且要放在该行分号前,否则就没有效果。 (不过分号前的空格不会影响它)
    4.  如果因为一些特殊原因,你不得不在一个代码块中声明两个同样的属性,那么请把!important加在第一个属性后面,因为这样做会让所有浏览器中第一个属性的权重更大,而IE6除外(这是一个只有IE6才有的hack,但是不会影响你的CSS)

    永不使用

    非到万不得已不要用!important。如果你是出于懒惰使用!important,为了避免例行的调试而滥用它,那么你(或者是那些后继开发你项目的人)将会深受其害。

    如果你并非滥用只是有偶尔用一下!important,同样,你很快就会发现你的样式会难以维护。正如上面我们讨论过的,本来,CSS会根据层叠和权重产生正常的作用顺序。但当你使用了!important就扰乱了原本的顺序,让更多的权重给了正常情况下本不应该获得这么多权重的样式。

    如果你从不使用!important,那么这标志着你真正理解了CSS并且证明你在编写代码前经过深思熟虑。

    正如古老的格言所说“永远不要说‘永不’”,所以接下来我们还是要来讨论!important的一些合理的用法。

    帮助测试可访问性

    正如前面提到过的,用户样式中可以包含!important声明,允许用户根据自己的特殊需求来给具体的CSS样式增加权重以帮助他们阅读和访问内容。

    有特殊需求的用户可以把!important加到像font-size这样的打印属性上来加大字体,或者为了提高网页的对比度而把它加到与颜色相关的样式上。

    暂时解决紧急问题

    总会有这样的情况发生——某个客户的线上网站出现了CSS的bug,你必须快速修复。在大多数情况下你应该会用Firebug或者其他的开发者工具来调试你的CSS代码并且最终修复它。但是,如果这个bug发生在IE6或者是其他没有提供调试工具的浏览器上的时候,你可能需要使用!important来完成快速修复。

    当你用这个临时修复的办法让网站继续上线以后(这样可以先摆平客户),你再花些时间用不破坏层叠且可维护性高的方法来修复这个bug也为时未晚。当你找到更好的解决方案你就可以替换掉线上的!important部分,而且客户对此毫不知情。

    覆写用户生成内容中的行内样式

    CSS开发中一个让人头疼的问题,就是当我们遇到用户生成内容中有行内样式的情况,这种情况多发生在一些使用了所见即所得网页编辑器的CMS系统中。在CSS层叠中,行内样式会覆盖常规样式。然而,我们并不想看到那些本该被我们定义好的CSS样式作用的元素却被用户生成内容中的行内样式改变。此时你就可以用!important来避免这种问题,因为,一条被开发者加了!important的样式会覆盖行内样式。

    关于单独设计的博客页面

    如果你曾经接触过设计个人博客页面的技术(许多设计师反对将 “艺术指导”用于这种技术,确实如此),像Heart Directed中展示的那样,你会发现有一种需求要求每个单独的文章都要有它自己独立的样式,抑或你需要使用行内样式。你可以用这篇文章中给出的代码为一个个人页面编写它自己的样式。

    !important在这个时候可以派上用场,为了在你的站点里创建一个独一无二的页面,你可以轻松覆盖默认的样式而不必担心原本的CSS权重。

    总结

    如果你遇到了特殊的需求,或者你想覆盖用户代理(译注:即浏览器)和开发者的默认样式,提高页面可访问性,你最好慎重使用!important。你要对你的CSS在考虑周全的同时尽可能地避免使用!important。甚至在上面提到的许多能用到!important的地方它也不总是必要的。

    尽管如此,!important在CSS中还是有用的。如果你接手一个项目,而这个项目之前的开发人员正好使用了!important,那么你在修复一些问题的时候我们今天所讨论的将会派上用场。

    博文部分内容来自:http://www.w3cplus.com/css/the-important-css-declaration-how-and-when-to-use-it.html

  • 相关阅读:
    好好活,做有意义的事
    linux运维、架构之路-linux基础知识
    linux运维、架构之路-linux目录结构
    linux运维、架构之路-linux基础优化
    linux运维、架构之路-SSH远程管理服务
    linux运维、架构之路-实时同步方案
    linux运维、架构之路-nfs网络文件系统
    linux运维、架构之路-全网备份项目方案
    linux运维、架构之路-rsync
    编程题
  • 原文地址:https://www.cnblogs.com/tianma3798/p/6202008.html
Copyright © 2020-2023  润新知