HTML5学堂-码匠 HTML5学堂

您当前位于:HTML+CSS ——> CSS样式优先级 important

CSS样式优先级 important

2015/05/29 21:24:22 | 作者:HTML5学堂(码匠) | 分类:HTML+CSS | 关键词:important,CSS,样式,优先级

CSS important

HTML5学堂:用CSS选择器给标签设置样式,有的样式可能被其他CSS选择器中的样式发生覆盖了,但是如果给CSS属性设置了important永远都不会被覆盖,导致的原因是什么?那么本文来给大家讲解important命令。

什么是important

!important是CSS1就定义的语法,作用是提高指定CSS属性的优先级。

important的语法

  1. 选择器名 { 
  2.     CSS属性!important 
  3. }

也就是定义在CSS属性值的后面

important 有何作用

默认情况下,CSS属性按级层覆盖,例如在CSS文件中的定义样式可以被style属性定义的样式覆盖,反之则不行。然而,对覆盖平衡而言,加上一个“!important”优先级大于正常的CSS属性的优先级。

important的兼容

IE7,IE8,firefox,chrome等高端浏览器下,已经可以识别 !important属性, 但是IE6仍然不能完全识别,含! important的样式属性和覆盖它的样式属性单独使用时(不在一个{}里),IE 6.0认为! important优先级较高,否则当含! important的样式属性被同一个{}里的样式覆盖时,IE 6.0认为! important较低。

示例代码——!important的样式属性和覆盖它的样式属性不在同一个选择器里

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>HTML5Course - HTML5学堂</title>
  6.     <link rel="stylesheet" href="reset.css">
  7.     <style>
  8.         .wrap {
  9.             width: 200px;
  10.             height: 200px;
  11.             background-color: green!important;
  12.             line-height: 200px;
  13.             text-align: center;
  14.         }
  15.         #con {
  16.             background-color: pink;        
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21.     <div class="wrap" id="con">HTML5学堂</div>
  22. </body>
  23. </html>

非IE6下测试,!important的样式属性和覆盖它的样式属性不在同一个选择器里,结果如下图

HTML5学堂 CSS important h5course

IE6下测试,!important的样式属性和覆盖它的样式属性不在同一个选择器里,结果如下图

HTML5学堂 CSS important h5course

示例代码——!important的样式属性和覆盖它的样式属性在同一个选择器里

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>HTML5Course - HTML5学堂</title>
  6.     <link rel="stylesheet" href="reset.css">
  7.     <style>
  8.         .wrap {
  9.             width: 200px;
  10.             height: 200px;
  11.             background-color: green!important;
  12.             background-color: pink;
  13.             line-height: 200px;
  14.             text-align: center;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <div class="wrap" id="con">HTML5学堂</div>
  20. </body>
  21. </html>

非IE6下测试,!important的样式属性和覆盖它的样式属性不在同一个选择器里,结果如下图

HTML5学堂 CSS important h5course

IE6下测试,!important的样式属性和覆盖它的样式属性在同一个选择器里,结果如下图

HTML5学堂 CSS important h5course

相关文章推荐

CSS引入方式

link和@import的区别

CSS文件中url的路径含义及使用

CSS选择器优先级

reset 样式重置

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端