定义及语法:

!important是CSS1就定义的语法,作用是提高指定样式规则的应用优先权

语法格式:{ cssRule !important },即将!important写在定义的最后面,

例如:

box{color:red !important;}

兼容性:

应用场景:

场景一:

<!--应用场景一-->

<div id="content">
<p class="p1">The daimler executive familiar with the collaboration said daimler and byd might display a prototype of the jointly developed car as early as the paris auto show in october.
熟悉合作情况的戴姆勒高管说,戴姆勒和比亚迪最早有可能于10月份在巴黎车展上展出这款合作开发汽车的样车。</p> <p class="p2">The daimler executive familiar with the collaboration said daimler and byd might display a prototype of the jointly developed car as early as the paris auto show in october.
熟悉合作情况的戴姆勒高管说,戴姆勒和比亚迪最早有可能于10月份在巴黎车展上展出这款合作开发汽车的样车。</p>
</div>
    #content p{
color: orange;
}
.p1{color: blue;}
.p2{color:blue !important;}

显示效果:

注:

默认情况下,class的优先级小于id,所以,p1中即使用class重定义了自身样式,也无法生效,所以继承父级属性,这行字还是orange!
但是,p2中,用了important提升优先级(或看成强制重定义),所以这里的css得以生效,这行字变为了蓝色!

 

场景二:

<!--场景二-->
<div class="color1 color2">
The daimler executive familiar with the collaboration said daimler and byd might display a prototype of the jointly developed car as early as the paris auto show in october.
熟悉合作情况的戴姆勒高管说,戴姆勒和比亚迪最早有可能于10月份在巴黎车展上展出这款合作开发汽车的样车。
</div>
	/*应用场景二*/

	.color1{color: blue;}
.color2{color:orange !important;}

显示效果:

注:

当出现多个class共同控制某个样式时,可以根据需求,在某个class里面通过!important来
优先显示

在线演示:http://codepen.io/anon/pen/OVjXPQ

探究css !important的应用之道的更多相关文章

  1. css !important用法以及CSS样式使用优先级判断

    之前一直看到很多css中都有!important这个样式,一直不知道有什么作用的,今天在网上详细了解了一下,看了别人的博客,顺便转载收藏一下 css !important用法CSS样式使用优先级判断 ...

  2. css !important的作用

    css !important的作用是提高指定CSS样式规则的应用优先权. 注意:这个不是万能的,在神奇的IE6下仍然有问题,请参见:http://www.w3chtml.com/css3/rules/ ...

  3. css ! important 兼容性的一点测试

    css ! important 这个东西网上一堆内容,我只说我用到的一点地方和我的理解, 这个东西ie6不支持,ie高版本是支持的.其他浏览器也是支持.先理解这一点 .abc { width:100p ...

  4. how to overwrite css !important style

    how to overwrite css !important style css !important bug how to override css !important style https: ...

  5. css important

    !important是CSS1就定义的语法,作用是提高指定样式规则的应用优先权.语法格式{ cssRule !important },即 写在定义的最后面,例如:box{color:red !impo ...

  6. CSS - !important声明强制优先

    !important声明强制优先 CSS优先级中还有一个最无敌的声明,就是!important. 在CSS样式表中,带有!important声明的样式优先使用,它的优先级会超越任何地方.任何方式的样式 ...

  7. CSS怎样改变行内样式(通过外部级联样式表) css !important用法CSS样式使用优先级判断

    CSS样式优先级 行内>内部>外部 使用!important的css定义是拥有最高的优先级的.只是在ie6下出了一点小的bug,注意书写方式一般可以轻松避开的. CSS中的!importa ...

  8. 探究CSS中的包裹性

    之前一直都知道css中的部分元素具有包裹性,今天写博客的时候正好也遇到了一个,所以想总结一下,有错误的地方欢迎指出来. 什么是包裹性? 包裹性就是父元素的宽度会收缩到和内部元素宽度一样. 哪些元素具有 ...

  9. 探究 CSS 混合模式\滤镜导致 CSS 3D 失效问题

    今天在写一个小的 CSS Demo,一个关于 3d 球的旋转动画,关于 CSS 3D,少不了会使用下面这几个属性: { transform-style: preserve-3d; perspectiv ...

随机推荐

  1. python的按位运算

    #coding=utf-8#"&"按位与运算,是指一个数字转化为二进制,然后这些二进制的数按位来进行与运算a=7&18print a'''首先将7转化为二进制,得到 ...

  2. js接收复选框的值

    <td><input type="checkbox" class="title" name="title" value=& ...

  3. phpMyAdmin配置及 错误 缺少 mysqli 扩展。请检查 PHP 配置

    PHPMyadmin配置文件config.inc.php内容如下,在需要设置的地方增加了相关注释.     非常适合对数据库操作命令不熟悉的数据库管理者,下面我就说下怎么安装该工具: 1.先到网上下载 ...

  4. jQuery验证框架 .

          目录视图 摘要视图 订阅 “程序人生”中国软件开发者职业生涯调查     CSDN社区“三八节”特别活动      开发者职业生涯调查之未来 jQuery验证框架 分类: JQuery 2 ...

  5. [ERROR] Unknown/unsupported storage engine: InnoDB

    将CentOS上的mysql升级以后,出现无法启动服务的问题.运行mysqld_safe后查看log信息,看到标题所示的错误.搜索以后发现是配置不对,难道两个版本的配置不能互相兼容?那还叫升级?坑爹啊 ...

  6. MD5加密运算

    //MD5 对字符串的加密 -(void)demo1 { NSString *str = @"love"; //对字符串进行MD5加密 str = str.md5String; N ...

  7. QT高级运用之粒子模拟(Particle Simulations)

    粒⼦模拟是计算机图形技术的可视化图形效果.典型的效果有:落叶,⽕焰,爆炸,流星,云等等.它不同于其它图形渲染, 粒⼦是基于模糊来渲染.它的结果在基于像素下是不可预测的.粒⼦系统的参数描述了随机模拟的边 ...

  8. 转自:http://blog.sina.com.cn/s/blog_86e874d30101e3d8.html(谢谢原文作者),Win7下安装CentOS 6.5双系统

    经过一下午的折腾,终于在64位的Windows 7上面成功安装了CentOS 6.5(64bit)系统,中途因为硬盘分区的问题失败了一次.下面是安装过程: 在安装过程中借助了这篇文章的内容:http: ...

  9. phpcms v9二次开发之模型类的应用(1)

    在<phpcms二次开发之模型类model.class.php>中讲到了模型类的建立方法,接下来我讲一下模型类的应用.      前段时间我基于phpcms v9开发了一个足球网.足球网是 ...

  10. OpenStack点滴02-WSGI

    OpenStack对外提供REST API,那么REST API是如何建立起来的呢? OpenStack用了一种叫WSGI(Web Service Gateway Interface)的东西,WSGI ...