css中提升优先级属性!important的用法总结
发布时间：2014-08-08 10:20:22 作者：佚名 
我要评论
我要评论!important只有Ie7.0和firefox可以识别，但是Ie6.0不能成功应用.!important提升优先级，下面对它的用法做下总结
复制代码
代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
<!--
!important只有Ie7.0和firefox可以识别，但是Ie6.0不能成功应用.!important提升优先级（或看成强制重定义-->
<!--
!important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权(参见：W3.org的解释)。语法格式 {
sRule!important
}
，即写在定义的最后面，例如：box {
color:red !important;
}
假如我们定义一个这样的样式： #box {
background-color: #ffffff !important;
background-color: #000000;
}
那么在支持该语法的浏览器，如Firefox、Opera中，能够理解!important的优先级，背景显示#cccccc颜色，而在IE中则显示#000000.能说它“不认识、不支持”！
-->
#box div {
color:red;
}
.important_false {
color:blue;
}
.important_true {
color:blue !important;
}
#box2 {
background-color: #cccccc !important;
background-color: #000000;
}
<!--
firefox：
下面这段如果放在最上面，则是红色的， 如果放在最下面则是blue。说明如果放在最上面，#box div覆盖了#idColor，这时是id的优先级。而.important_false的class优先级小于id，没有覆盖掉#box div。
如果放在最下面，则#idColor没有覆盖.important_false。 如果不设置id="idColor", 则是blue。说明.important_false 覆盖掉了#box div
IE7:
#idColor放在最下面，是红色的。放在最下面也是红色的，去掉id属性。也是红色的。说明都没覆盖#box div。
-->
#idColor {
color:gray;
}
</style>
</head>
<body>
<div id="box">
<div class="important_false" id="idColor">这一行末使用important。class的优先级小于id的优先级。IE7是红色，firefox是蓝色。</div>
<div class="important_true" >这一行使用了important</div>
</div>
<div id="box2"> 在不同的浏览器下，这行字的色应该不同！IE7，Firefox是红色。IE6是蓝色</div>
</body>
</html>
相关文章
- link与@import这两种方式都是为了加载CSS文件,但还是存在着细微的差别。下面脚本之家小编给大家介绍CSS中link和@import的区别说明，感兴趣的朋友一起看下吧2016-08-12
- 下面小编就为大家带来一篇浅谈CSS 权值 层叠 重要性(!important)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-05
- 这篇文章主要介绍了CSS中的@import,是CSS入门学习中的基础知识,需要的朋友可以参考下2015-07-14
- 这篇文章主要介绍了加了important标记css样式的jQuery写法，需要的朋友可以参考下2014-07-16
- 使用!important对于性能并没有什么负面影响。但是从可维护性角度考虑还是少用这个规则。不过这个规则在IE6中有bug2014-06-05
- 一直以来写CSS的时候都没有过多的考虑使用@import的方式,最近又看到有朋友在讨论关于@import的一些好坏，以及要不要使用@import的方式加载样式,需要的朋友可以了解下2012-12-12
- 本文章详细的介绍了关于link和@import的区别，有需要了解的朋友可以参考一下本文章2012-03-31
- 我们引用css文件通常有两种方式:link,@import 这两天整理了一下这两种用法的区别，加深认识2010-06-17
- 很多人，包括很多网站（我所见过的所有网站，包括国内著名的‘网页设计师’网站），都说important是不被IE所支持和认识的，可是真的是这样吗？看了下边的两个例子，也许你2010-01-05
Webpack 中 css import 使用 alias 相对路径的方法
在 Vue 项目中，我们通常使用 vue-webpack 脚手架生成工程模板，然后配置 @ 为项目根目录下放资源和源码的 /src 目录的别名。这篇文章给大家介绍Webpack 中 css import 使2018-07-24
最新评论