CSS中!important的作用
提升指定样式规则的应用优先权。
IE6及以下浏览器有个比较显式的支持问题存在，!important在同一条规则集里不生效。请看下述代码：
示例代码：
div { color: #f00 !important; color: #000; }在上述代码中，IE6及以下浏览器div的文本颜色为#000，!important并没有覆盖后面的规则；其它浏览器下div的文本颜色为#f00
IE6及以下浏览器要使!important生效，可用以下代码：
示例代码：
div { color: #f00 !important; } div { color: #000; }在上述代码中，IE6及以下浏览器中div的文本颜色表现与其它浏览器一致，都为#f00
IE6及更早浏览器下，!important在同一条规则集内不生效。
示例：
<!DOCTYPE html>
<html>
<head>
<title>important的使用</title>
<meta name="content-type" content="text/html; charset=UTF-8">
<style>
.button {
position: relative;
background-color: #4CAF50;
border-radius:8px;
font-size: 28px;
color: #FFFFFF;
padding: 20px;
width: 200px;
text-align: center;
transition-duration: 1.5s;
overflow: hidden;
cursor: pointer;
}
.button:hover{
box-shadow:0 4px 8px 0 rgba(0,0,0,0.1),0 6px 20px 0 rgba(0,0,0,0.299);
} .button:after {
content: "";
background: #90EE90;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition:1s;
} .button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition:0s;
}
</style>
</head>
<body> <button class="button">Click Me</button>
<p>第31行的margin-left设置了!important，因此后面的第39行是不能更改margin-left的值。
</body>
</html>
参考文章：
http://www.runoob.com/css3/css3-buttons.html
http://www.css88.com/book/css/rules/!important.htm
本文为博主原创文章，若需转载请注明出处。
CSS中!important的作用的更多相关文章
- 转：css中!important的作用
转:http://www.cnblogs.com/guoguo-15/archive/2011/08/24/2151859.html {*rule !important}这个css规则当今在网页制作的 ...
- css中!important的优先级问题
css中!important的优先级在主页面中写>在外部引用的css文件 之前我一直以为css的样式不管写在哪里只要加上!important那么它的优先级就是最高的,事实上并不是这样的,尤其在动 ...
- css 中 important 的用法
css 中 important 的如何使用? important对 一个良好(或者是标准)的浏览器来说,不仅仅是从顺序上提升代码的优先级,还可以用来提升class的优先级(比如firefox), ...
- CSS中"!important"的使用
本篇文章使用最新的IE10以及firefox与chrome测试(截止2013年5月27日22:23:22) CSS的原理: 我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < ...
- CSS中!important的优先级
本篇文章使用最新的IE10以及firefox与chrome测试(截止2013年5月27日22:23:22) CSS的原理: 我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < ...
- CSS中!important的使用 转
本篇文章使用最新的IE10以及firefox与chrome测试(截止2013年5月27日22::) CSS的原理: 我们知道,CSS写在不同的地方有不同的优先级, .css文件中的定义 < 元素 ...
- Css中!important的用法
!important为开发者提供了一个增加样式权重的方法.应当注意的是!important是对整条样式的声明,包括这个样式的属性和属性值 <!DOCTYPE HTML> <html& ...
- css中!important的用法总结
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS3 nth-child的使用，详解css中nth的作用，以及nth-child的兼容写法
:nth-child是css3的一个比较常用的选择器.它用于匹配属于其父元素中的子元素,不论元素的类型. 它的参数可以是数字.关键词或公式.下面讲介绍它的使用方法, nth-child的使用 html ...
随机推荐
- Android如何避免切换至SurfaceView时闪屏（黑屏闪一下）以及黑屏移动问题
1.最近的项目中,有一个Activity用到Fragment+ViewPager,其中一个fragment中实现了视频播放的功能,包含有SurfaceView.结果,每次打开程序第一次进入到该Acti ...
- （高德地图）marker定位 bug 解决总结
项目背景: 一个项目bug,项目中用到高德地图,默认打开页面会生成一个marker(下图红色icon),然后用户拖动marker到想要的位置,并且保存. 用户反映定位不准确,在当前页面编辑的位置,到后 ...
- 炫！一组单元素实现的 CSS 加载进度提示效果
之前的文章个大家分享过各种类型的加载效果(Loading Effects),这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合.这些加载效果都是基于一个 DIV 元素实现的,十分强悍. 温馨 ...
- Sass细节一变量
同步发布在个人站 变量 局部变量和全局变量的定义 Sass的变量是用$申明的,有局部变量(选择器内部的变量)和全局变量(不在任何选择器内的变量).例如: //这里$width就是全局变量 $width ...
- C#日期格式转换
DateTime dt = DateTime.Now; // Label1.Text = dt.ToString();//2005-11-5 13:21:25 // Label2.Text = dt. ...
- js获取图片的真实大小，字节大小
在我们上传文件的时候,很多时候都要对他做限制,那么怎么在文件上传的时候,就获得这个文件的大小呢?至少在js前台有一个判断的时候,就不会给后台造成更大的压力了,下面就用js来获得文件的大小 <ht ...
- SQL Server代理(6/12)：作业里的工作流——深入作业步骤
SQL Server代理是所有实时数据库的核心.代理有很多不明显的用法,因此系统的知识,对于开发人员还是DBA都是有用的.这系列文章会通俗介绍它的很多用法. 如我们在这里系列的前几篇文章所见,SQL ...
- HT for Web自定义3D模型的WebGL应用
有不少朋友询问<HTML5 Web 客户端五种离线存储方式汇总>文章例子的3D表计模型是如何生成的,这个例子是通过导入3dmax设计好的表计模型,然后通过obj格式导入到HT for We ...
- Mac下github项目检出与提交
项目检出 如果你的git还没有代码仓库,可以用过git的代码仓库页面新建一个你的仓库 创建git上的仓库后,我们还需要建立本地的仓库,所以打开Mac终端,建立本地仓库文件夹(这里我用HelloC),然 ...
- 使用JSLint提高JS代码质量
随着富 Web 前端应用的出现,开发人员不得不重新审视并重视 JavaScript 语言的能力和使用,抛弃过去那种只靠“复制 / 粘贴”常用脚本完成简单前端任务的模式.JavaScript 语言本身是 ...