css几个优先级测试和!important
css样式不加!important情况下的有默认优先级 ，用!important提高优先级，
最常见的css样式选择器的优先级测试。
之前博文里也用到了提升优先级的方法：
测试结果：
加了!important的优先级>行内样式>id选择器>类选择器>标签选择器
本文通过背景色测试优先级，
该页面所有的div都用标签选择器设置了背景色蓝色。
（1）divall大的用来包裹其他小div的，在id选择器里设置了背景色为黄色。
结果：divall显示为黄色，id选择器大于标签选择器。（默认优先级）
（2）div1里没设背景色，按照标签选择器走。
结果：div1为蓝色，在无其他选择器时走这个，这个优先级比较低。
（3）div2设置id和class类选择器，id选择器为红色，类选择器设置背景色为黑色。
结果：div2显示红色，id选择器优先级大于类选择器。（默认优先级）
（4）div3设置了id和类选择器，类选择器里用了!important，类选择器指定了绿色。
结果：显示绿色，在类中加！important大于id选择器
（5）div4设置行内样式和id选择
结果：是id选择器的背景色灰色。
（6）div5设置行内样式和加了!important类选择器
结果：按照!important类选择器的，显示绿色。
测试代码：
<style>
body{margin:0px;}
div{background:blue;}/**标签选择器**/
#divall{width:500px;height:230px;position:relative;background:yellow;}/**id选择器**/
#div1{width:100px;height:50px;position:absolute;top:20px;float:left;left:20px;}
#div2{width:100px;height:50px;position:absolute;top:20px;float:left;left:140px;background:red;}
#div3{width:100px;height:50px;position:absolute;top:90px;float:left;left:20px;background:red;}
#div4{width:100px;height:50px;position:absolute;top:90px;float:left;left:140px;background:red;}
#div5{width:100px;height:50px;position:absolute;top:160px;float:left;left:20px;}
.c2{background:black;}/**类选择器**/
.c3{background:green!important;}/**加了!important**/
</style>
</head>
<body>
<div id="divall"><!--id选择器优先级高于标签选择器-->
<div id="div1">内容</div><!--背景色走的标签选择器-->
<div id="div2" class="c2">内容</div><!--id优先级高于class，所以c2样式没有生效--->
<div id="div3" class="c3">内容</div> <!--c3加了!important，c3优先级高于了id选择器-->
<div id="div4" style="background:gray">内容</div><!--行内样式高于id选择器-->
<div id="div5" class="c3" style="background:gray">内容</div><!--important高于行内样式-->
</div>
图示：
css几个优先级测试和!important的更多相关文章
- css !important用法以及CSS样式使用优先级判断
之前一直看到很多css中都有!important这个样式,一直不知道有什么作用的,今天在网上详细了解了一下,看了别人的博客,顺便转载收藏一下 css !important用法CSS样式使用优先级判断 ...
- CSS样式之优先级
说到到css的样式优先级,今天偶再来回顾下,从css的样式优先级可分为两个部分: 1.从CSS代码放置的位置看权重优先级: 内联样式 > 内部嵌入样式 >外联样式 2.从样式选择器 ...
- CSS样式选择器优先级
CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...
- CSS选择器、优先级与匹配原理（转）
CSS选择器.优先级与匹配原理 导航 为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好 废话就不多说了 CSS 2.1 selectors, Part 1 计算指定选择器的优先 ...
- css权重及优先级问题
css权重及优先级问题 几个值的对比 初始值 指定值 计算值 应用值 CSS属性的 指定值 (specified value)会通过下面3种途径取得: 在当前文档的样式表中给这个属性赋的值,会被优先使 ...
- [程序猿入行必备]CSS样式之优先级
专业玩家请移步:http://www.w3.org/TR/CSS2/cascade.html 使用CSS控制页面样式时,常常出现设定的样式被"覆盖",不能生效的情况. 浏览器是根据 ...
- CSS 选择器及其优先级
CSS 的选择器有很多类型,我们将常用的这些列表如下: 一.CSS 选择器的类别 1. 基本选择器 基本选择器 解释 备注 * 通用选择器,匹配所有元素 CSS2 E 元素选择器,匹配类型为 E 的所 ...
- CSS样式的优先级
1.相同权值情况下,CSS样式的优先级总结来说,就是--就近原则(离被设置元素越近优先级别越高): 内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中). 2.权 ...
- css样式引入优先级？
css中的优先级讲的有 1.选择器的优先级. 2.样式引入的优先级. 今天要研究的是样式引入的优先级.网上又很多答案都是如下的,但是真的是这样的吗,让我们来探一探究竟是如何. 四种样式的优先级别是:行 ...
随机推荐
- 洛谷 P2722 总分题解
题目描述 我们可以从几个种类中选取竞赛的题目,这里的一个"种类"是指一个竞赛题目的集合,解决集合中的题目需要相同多的时间并且能得到相同的分数.你的任务是写一个程序来告诉USACO的 ...
- 二维数组中的查找 - Java版 -简单二分查找 -<<剑指Offer>> -水题
如题 (总结) -认真读题, 还WA了一次, https://www.nowcoder.com/practice/abc3fe2ce8e146608e868a70efebf62e?tpId=13&am ...
- [转]kafka要等一段时间才能消费到数据
kafka要等一段时间才能消费到数据 pythonkafka 为什么用python写的kafka客户端脚本,程序一运行就能生产数据,而要等一段时间才能消费到数据(topic里面有数据).(pyk ...
- test201909027 老Z
30+100+40=170.数据出锅*2,也是没谁了. 装饰 快要到 Mope 的生日了,Mope 希望举行一场盛大的生日派对. 派对的准备工作中当然有装饰房间啦.Mope 的房间里有按从左到右的顺序 ...
- wordpress模板加载顺序汇总
我们要创建一个新的wordpress模板需要先了解有哪些页面模板,这些页面模板的文件是什么?它们是怎么工作的?下面ytkah汇总了一些常用的wordpress模板结构方便大家查找 首页 首先WordP ...
- PHP程序员最容易犯的Mysql错误
对于大多数web应用来说,数据库都是一个十分基础性的部分.如果你在使用PHP,那么你很可能也在使用MySQL—LAMP系列中举足轻重的一份子. 对于很多新手们来说,使用PHP可以在短短几个小时之内轻松 ...
- 36氪新风向 | 三个月估值普涨三倍，你未来的RPA机器人同事正在路上
http://www.sohu.com/a/320208242_114778 2019 年 4 月,关注 RPA 赛道的投资人 Kevin(化名)就发现,仅仅过了一个春节,自己所在的早期基金已经投不起 ...
- [Web] Adaptive loading
There is pretty good talk about performacne https://www.youtube.com/watch?v=puUPpVrIRkc It targets t ...
- 目标检测的mAp
众多目标检测的知识中,都提到了mAp一值,那么这个东西到底是什么呢: 我们在评价一个目标检测算法的"好坏"程度的时候,往往采用的是pascal voc 2012的评价标准mAP.目 ...
- 在触发器中使用{ITEM.LASTVALUE}时在首页问题栏信息显示不全
在触发器中使用了系统宏变量,当条件满足时,如果这个宏代表的内容超过了20个字符,那么在首页信息就显示不全,会有一堆省略号 感谢https://blog.csdn.net/yu415907917/art ...