探究css !important的应用之道
定义及语法:
!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的应用之道的更多相关文章
- css !important用法以及CSS样式使用优先级判断
之前一直看到很多css中都有!important这个样式,一直不知道有什么作用的,今天在网上详细了解了一下,看了别人的博客,顺便转载收藏一下 css !important用法CSS样式使用优先级判断 ...
- css !important的作用
css !important的作用是提高指定CSS样式规则的应用优先权. 注意:这个不是万能的,在神奇的IE6下仍然有问题,请参见:http://www.w3chtml.com/css3/rules/ ...
- css ! important 兼容性的一点测试
css ! important 这个东西网上一堆内容,我只说我用到的一点地方和我的理解, 这个东西ie6不支持,ie高版本是支持的.其他浏览器也是支持.先理解这一点 .abc { width:100p ...
- how to overwrite css !important style
how to overwrite css !important style css !important bug how to override css !important style https: ...
- css important
!important是CSS1就定义的语法,作用是提高指定样式规则的应用优先权.语法格式{ cssRule !important },即 写在定义的最后面,例如:box{color:red !impo ...
- CSS - !important声明强制优先
!important声明强制优先 CSS优先级中还有一个最无敌的声明,就是!important. 在CSS样式表中,带有!important声明的样式优先使用,它的优先级会超越任何地方.任何方式的样式 ...
- CSS怎样改变行内样式(通过外部级联样式表) css !important用法CSS样式使用优先级判断
CSS样式优先级 行内>内部>外部 使用!important的css定义是拥有最高的优先级的.只是在ie6下出了一点小的bug,注意书写方式一般可以轻松避开的. CSS中的!importa ...
- 探究CSS中的包裹性
之前一直都知道css中的部分元素具有包裹性,今天写博客的时候正好也遇到了一个,所以想总结一下,有错误的地方欢迎指出来. 什么是包裹性? 包裹性就是父元素的宽度会收缩到和内部元素宽度一样. 哪些元素具有 ...
- 探究 CSS 混合模式\滤镜导致 CSS 3D 失效问题
今天在写一个小的 CSS Demo,一个关于 3d 球的旋转动画,关于 CSS 3D,少不了会使用下面这几个属性: { transform-style: preserve-3d; perspectiv ...
随机推荐
- python的按位运算
#coding=utf-8#"&"按位与运算,是指一个数字转化为二进制,然后这些二进制的数按位来进行与运算a=7&18print a'''首先将7转化为二进制,得到 ...
- js接收复选框的值
<td><input type="checkbox" class="title" name="title" value=& ...
- phpMyAdmin配置及 错误 缺少 mysqli 扩展。请检查 PHP 配置
PHPMyadmin配置文件config.inc.php内容如下,在需要设置的地方增加了相关注释. 非常适合对数据库操作命令不熟悉的数据库管理者,下面我就说下怎么安装该工具: 1.先到网上下载 ...
- jQuery验证框架 .
目录视图 摘要视图 订阅 “程序人生”中国软件开发者职业生涯调查 CSDN社区“三八节”特别活动 开发者职业生涯调查之未来 jQuery验证框架 分类: JQuery 2 ...
- [ERROR] Unknown/unsupported storage engine: InnoDB
将CentOS上的mysql升级以后,出现无法启动服务的问题.运行mysqld_safe后查看log信息,看到标题所示的错误.搜索以后发现是配置不对,难道两个版本的配置不能互相兼容?那还叫升级?坑爹啊 ...
- MD5加密运算
//MD5 对字符串的加密 -(void)demo1 { NSString *str = @"love"; //对字符串进行MD5加密 str = str.md5String; N ...
- QT高级运用之粒子模拟(Particle Simulations)
粒⼦模拟是计算机图形技术的可视化图形效果.典型的效果有:落叶,⽕焰,爆炸,流星,云等等.它不同于其它图形渲染, 粒⼦是基于模糊来渲染.它的结果在基于像素下是不可预测的.粒⼦系统的参数描述了随机模拟的边 ...
- 转自:http://blog.sina.com.cn/s/blog_86e874d30101e3d8.html(谢谢原文作者),Win7下安装CentOS 6.5双系统
经过一下午的折腾,终于在64位的Windows 7上面成功安装了CentOS 6.5(64bit)系统,中途因为硬盘分区的问题失败了一次.下面是安装过程: 在安装过程中借助了这篇文章的内容:http: ...
- phpcms v9二次开发之模型类的应用(1)
在<phpcms二次开发之模型类model.class.php>中讲到了模型类的建立方法,接下来我讲一下模型类的应用. 前段时间我基于phpcms v9开发了一个足球网.足球网是 ...
- OpenStack点滴02-WSGI
OpenStack对外提供REST API,那么REST API是如何建立起来的呢? OpenStack用了一种叫WSGI(Web Service Gateway Interface)的东西,WSGI ...