探究css !important的应用之道
2024-10-18 22:35:02
定义及语法:
!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
最新文章
- Mina入门实例(一)
- Json——js和C#对Json的操作
- Windows使用shipyard
- 搜索栏会消失 uisearchbar 狂点消失的问题解决
- 阿里云中Centos下配置防火墙
- Java NIO 概述
- RTMP命令亲自测试记录
- network Driver , TDI(Transport Driver Interface) Drivers
- OpenJudge计算概论-求一元二次方程的根【含复数根的计算、浮点数与0的大小比较】
- IEEE 802.3 Ethernet
- JavaScript基础知识整理(1)数组
- Spring.Scheduling.Quartz的使用
- 菜鸟日记之JSP1
- Java---软件试用次数(Properties类的简单使用)
- C#实现打印与打印预览功能(转)
- lpc1788控制步进电机28BYJ-48
- NGINX和PHP之间的环境变量传递
- 【计算机视觉】基于行为的ReID演示
- 干净的架构The Clean Architecture
- SQL菜鸟学习札记(一)
热门文章
- TP框架多表联查
- JAVA彩色图片变灰处理
- CSS3 2D转换
- (转)Discuz!NT图文安装教程
- 请帮我看看这个页面,红色部份如何改才能保存到ACCess数据库中
- fopen,file_get_contents,curl的区别
- DeviceToken 获取失败,原因:Error Domain=NSCocoaErrorDomain Code=3000 ";未找到应用程序的“aps-environment”的授权字符串";...
- PHP XML DOM
- 有关Ajax实现的两种方法
- 你好,C++(17)0.1*10不等于1.0——4.1.4 关系操作符4.1.5 逻辑操作符