• 技术文章 >web前端 >css教程

    如何使用!important来改变CSS中优先级的顺序

    不言不言2018-11-20 17:23:23原创2391
    每个样式表的优先顺序是在前面的页面上记载的,在相同的样式表中,同一元素的属性设定多个值的情况下,会发生什么呢?本篇文章就来给大家分享一下如何使用!important来改变CSS中优先级的顺序。

    我们来看一个简单的例子。首先,创建目标HTML语句

    <!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<style type="text/css">
    strong {
      color: #00ff00;
    }
    strong {
      color: #ff0000;//red
    }
    	</style>
    </head>
    <body>
    <p>
    啦啦啦啦<strong>php中文网</strong>
    哒哒哒哒哒<strong>php</strong>中文网
    </p>
    </body>
    </html>

    浏览器上效果显示如下:strong元素中文字的颜色是红色。

    360截图20181120165834239.jpg

    接下来我们来看一下!important的使用

    如果要改变代码中优先级,则需要使用!important,使用方法如下。

    选择器{ 
      property(属性):value(值) !Important ; 
      }

    在描述样式时,如果在值之后用空格再写!important,则无论正常优先级如何,都将优先应用该样式。

    下面我们来看一下具体的例子,将上述代码中的CSS变成如下所示

    <style type="text/css">
    strong { 
      color:#00ff00 !important; 
    } 
    
    strong { 
      color:#ff0000; 
    } 
    </style>

    浏览器上显示如下所示:strong元素中字体颜色变成了绿色,!important改变了样式的优先级。

    360截图20181120170720402.jpg

    我们接下来看看当样式表不同时!important的使用

    样式表的优先级如下所示

    (高优先级)
    样式表在HTML文档中描述
    用户样式表由用户查看
    样式表设置每个浏览器的默认样式表 (低优先级)

    如果使用HTML文档中描述的样式表为同一元素的属性再次设置在用户样式表中设置的样式表,样式表形式将生效。

    那么如果在用户样式表设置中添加“!Important”会发生什么?在这种情况下,带有“!Important”的样式优先。我们来具体看一下。

    (高优先级)
    有!important的用户的样式表
    有!important写HTML文档中的样式表
    写在HTML文档中的样式表
    用户样式表
    默认样式表 (低优先级)

    需要特别注意的是“带有!important的用户样式表”比“带有!important的HTML文档描述的样式表”具有更高的优先级。因此,即使HTML文档的创建者将样式设置为“!Important”,如果在用户样式表中将新样式值表设置为“!Important”,则用户样式表也会生效。

    以上就是如何使用!important来改变CSS中优先级的顺序的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:!important
    上一篇:css3中的播放方式animation-timing-function属性详解 下一篇:跨列column-span属性详解
    PHP编程就业班

    相关文章推荐

    • CSS中!important的作用• 分享css中提升优先级属性!important的用法总结• IE6也认识!important• CSS中关于!important的使用方法总结• 图文详解CSS中!important 的使用方法• 使用CSS的!important如何改变优先级

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网