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

  • 相关阅读:
    Spring MVC返回多重的Json数据
    Eclipse Maven项目中修改JDK版本
    Maven的使用笔记
    Windows下Redis主从配置出现Writing to master:Unknow error
    Java开发必会的Linux命令(转)
    使用maven引入slf4j、logback时发生冲突
    使用SSM框架搭建JavaWeb,使用Junit测试时遇到CannotGetJdbcConnetionException
    HTTP基础
    express 热启动 静态文件部署 跨域解决 调试
    github+git提交 基础用法
  • 原文地址:https://www.cnblogs.com/Langzi127/p/1678015.html
Copyright © 2011-2022 走看看