定义及语法:

!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. POJ1502

    #include <iostream> #include <cstdio> #include <algorithm> #include <climits> ...

  2. CSS 之 margin知识点

    1.margin的百分比值 普通元素的百分比maigin相对于容器元素的宽度(width) 进行计算的. 这里我们在图片外面设置一个宽高分别为800 * 600的容器.设置img{ margin: 1 ...

  3. Topshelf

    Topshelf允许开发者创建一个简单的控制台程序,将其安装为一个window服务. 这样做的原因很简单:方便调试. 使用命令行工具可以很方面的安装Topshelf创建的服务. server.exe ...

  4. 我对Backbone中url属性的理解

    Model中有一个url属性,而且有一个urlRoot属性. Collection中也有一个url属性. // 这是Model中的url方法 url: function() { var base = ...

  5. Swift - 40 - 枚举更加灵活的使用方式

    //: Playground - noun: a place where people can play import UIKit /* 这里的枚举没有给它的成员默认值, 而是给它绑定了一个类型, 之 ...

  6. WebSQL实例记录

    <table id="content"> </table> <br> <input type="button" id= ...

  7. centos 下mysql操作

    MySQL名字的来历MySQL是一个小型关系型数据库管理系统,MySQL被广泛地应用在Internet上的中小型网站中.由于其体积小.速度 快.总体拥有成本低,尤其是开放源码这一特点,许多中小型网站为 ...

  8. WebStorm 使用快捷键大全

    1. ctrl + shift + n: 打开工程中的文件,目的是打开当前工程下任意目录的文件. 2. ctrl + j: 输出模板 3. ctrl + b: 跳到变量申明处 4. ctrl + al ...

  9. Asp.net core与golang web简单对比测试

    最近因为工作需要接触了go语言,又恰好asp.net core发布RC2,就想简单做个对比测试. 下面是测试环境: CPU:E3-1230 v2 内存:16G 电脑有点不给力 操作系统:Centos7 ...

  10. sitecore(key\value\language)的灵活应用

    1.当我们在做网站的时候是否会因为一个页面的文字变动来回改变.这样的麻烦sitecore都帮我们解决了. 2.sitecore分类key和value和语言几个维度.不同的key会因为不同的语言显示不同 ...