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 ...
随机推荐
- MySQL PXC 高可用集群搭建
一些名词介绍: WS:write set 写数据集 IST: Incremental State Transfer 增量同步 SST:State Snapshot Transfer 全量同 ...
- ASP.NET 5中的那些K
ASP.NET 5最大的变化是什么?首当其冲的就是多了很多K,K表示的是ASP.NET vNext的项目代号“Project K”,但很容易让人想到一个汉字——“坑”,希望K不要成为“坑”的缩写. K ...
- Cocos2d-x 3.2 学习笔记（八）Action
Action -动作.所有精灵的表现,人机交互的表现,都是动作.cocos2dx 里面封装的动作可谓是丰富! Action有三个子类 1.FiniteTimeAction类是所有在有限时间能够完成的动 ...
- 结合 CSS3 & Canvas 模拟人行走的效果
HTML5 和 CSS3 技术给 Web 带来了新的利器,点燃了 Web 开发人员的激情.所谓只有想不到,没有做不到,的确如此.下面给大家分享一个结合 CSS3 & Canvas 模拟人行走的 ...
- SQL Server在执行SQL语句时，表之间驱动顺序对性能的影响
环境:SQL Server2012 SP3 企业版,开发服务器,并没有什么负载,全库索引统一Rebuild过 经反复执行验证过, 不算太复杂的SQL(存储过程中代入参数抠出来的SQL代码) 默认情况下 ...
- WEB编程中获取src目录下的文件（没有src目录）
这种情况遇见的会比较多,像一个WEB工程,如果在src下面写了一个xml或者一些其它的文件,当工程发布到服务器时,web程序是在tomcat等服务器下运行这个程序的,这个时候,程序目录里面并没有src ...
- Activity onDestroy() 回调缓慢问题分析及完美解决方案
说到Acitivity的onDestroy,对所有的Android开发者都很熟悉,但是不一定都知道里面存在着一些坑,分享给大家,以后踩中的时候可以应急 用Activity的时候,会发现如下问题: 有时 ...
- JAVA 设计模式 模板方法模式
定义 模板方法模式 (Template Method) 定义了一个操作中的算法的骨架,而将部分步骤的实现在子类中完成. 模板方法模式使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤. 模 ...
- 单纯形方法（Simplex Method）
最近在上最优理论这门课,刚开始是线性规划部分,主要的方法就是单纯形方法,学完之后做了一下大M算法和分段法的仿真,拿出来与大家分享一下.单纯形方法是求解线性规划问题的一种基本方法. 线性规划就是在一系列 ...
- 基于HTML5的WebGL结合Box2DJS物理引擎应用
上篇我们基于HT for Web呈现了A* Search Algorithm的3D寻路效果,这篇我们将采用HT for Web 3D来呈现Box2DJS物理引擎的碰撞效果,同上篇其实Box2DJS只是 ...