zoukankan      html  css  js  c++  java
  • important在css中的作用

    例一:

     
    CSS
    #box {
         color:red !important;
         color:blue;
     }


    HTML

    <div id="Box"> 在不同的浏览器下,这行字的色应该不同!</div>


              这个例子应该是大家经常见到的important的用法了,在IE环境下,这行字是蓝色,在firefox下,为红色,其用法不再多说了,看下一个例子。
    例二:

    CSS

    1 #box div{
         color:red;
     }
    2 .important_false{
         color:blue;
    }
    3.important_true{
         color:blue !important;
    }


    HTML

    <div id="Box">
        
    <div class="important_false">这一行末使用important</div>
        
    <div class="important_true">这一行使用了important</div>
    </div>

     
             例二中,CSS代码第一行设定了box里面所有div中字体色为红色,第二行和第三行都用class重新定义了自身div的字体色为蓝色,不同的是,第二行末使用important,而第三行使用了!

             默认情况下,class的优先级小于id,所以,第二行中即使用class重定义了自身样式,也无法生效,所以继承父级属性,这行字还是红色!

             但是,第三行中,用了important提升优先级(或看成强制重定义),所以这里的css得以生效,这行字变为了蓝色! 在这个例子中,IE(IE8)和Firefox的显示结果是一致的。

             从这个例子,得以证明,ie对important的并不是不支持!

                
    那么为什么很多人都说ie不认识它呢?我想应该是大家实战中可能都没有遇到例子中的情况: 当你想提升class的优先级时怎么办?

               也就是说大家可能都忽略了它的这一作用,只了解在命名为同一个元素的CSS代码块中,用它来提升排列顺序相对靠前的代码的优先级(例一)!

            通过上边两个例子,得以总结:

            important对 一个良好(或者是标准)的浏览器来说,不仅仅是从顺序上提升代码的优先级,还可以用来提升class的优先级(比如firefox),但是从IE对前者的不支持可以看出,这只是IE的一大BUG,而不能说它“不认识、不支持”!

             然而,不管怎么样,IE的这一大BUG帮助我们解决了很多兼容性问题,这显然不是件坏事!

    引自: http://blog.sina.com.cn/s/blog_54eeb5d9010008wp.html

  • 相关阅读:
    在Ubuntu中通过update-alternatives切换软件版本
    SCons: 替代 make 和 makefile 及 javac 的极好用的c、c++、java 构建工具
    mongodb 的使用
    利用grub从ubuntu找回windows启动项
    How to Repair GRUB2 When Ubuntu Won’t Boot
    Redis vs Mongo vs mysql
    java script 的工具
    python 的弹框
    how to use greendao in android studio
    python yield的终极解释
  • 原文地址:https://www.cnblogs.com/Langzi127/p/1678015.html
Copyright © 2011-2022 走看看