CSS important
HTML5学堂：用CSS选择器给标签设置样式，有的样式可能被其他CSS选择器中的样式发生覆盖了，但是如果给CSS属性设置了important永远都不会被覆盖，导致的原因是什么？那么本文来给大家讲解important命令。
什么是important
!important是CSS1就定义的语法，作用是提高指定CSS属性的优先级。
important的语法
-
选择器名 {
-
CSS属性!important
-
}
也就是定义在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的样式属性和覆盖它的样式属性不在同一个选择器里
-
<!doctype html>
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title>HTML5Course - HTML5学堂</title>
-
<link rel="stylesheet" href="reset.css">
-
<style>
-
.wrap {
-
width: 200px;
-
height: 200px;
-
background-color: green!important;
-
line-height: 200px;
-
text-align: center;
-
}
-
#con {
-
background-color: pink;
-
}
-
</style>
-
</head>
-
<body>
-
<div class="wrap" id="con">HTML5学堂</div>
-
</body>
-
</html>
非IE6下测试，!important的样式属性和覆盖它的样式属性不在同一个选择器里，结果如下图
IE6下测试，!important的样式属性和覆盖它的样式属性不在同一个选择器里，结果如下图
示例代码——!important的样式属性和覆盖它的样式属性在同一个选择器里
-
<!doctype html>
-
<html>
-
<head>
-
<meta charset="UTF-8">
-
<title>HTML5Course - HTML5学堂</title>
-
<link rel="stylesheet" href="reset.css">
-
<style>
-
.wrap {
-
width: 200px;
-
height: 200px;
-
background-color: green!important;
-
background-color: pink;
-
line-height: 200px;
-
text-align: center;
-
}
-
</style>
-
</head>
-
<body>
-
<div class="wrap" id="con">HTML5学堂</div>
-
</body>
-
</html>
非IE6下测试，!important的样式属性和覆盖它的样式属性不在同一个选择器里，结果如下图
IE6下测试，!important的样式属性和覆盖它的样式属性在同一个选择器里，结果如下图
相关文章推荐
CSS引入方式
link和@import的区别
CSS文件中url的路径含义及使用
CSS选择器优先级
reset 样式重置
欢迎沟通交流~HTML5学堂
极客编程技术分享
