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的更多相关文章

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

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

  2. CSS样式之优先级

    说到到css的样式优先级,今天偶再来回顾下,从css的样式优先级可分为两个部分: 1.从CSS代码放置的位置看权重优先级:     内联样式 > 内部嵌入样式 >外联样式 2.从样式选择器 ...

  3. CSS样式选择器优先级

    CSS样式选择器分为4个等级,a.b.c.d,可以以这四种等级为依据确定CSS选择器的优先级. 1.如果样式是行内样式(通过Style=””定义),那么a=12.b为ID选择器的总数3.c为Class ...

  4. CSS选择器、优先级与匹配原理（转）

    CSS选择器.优先级与匹配原理 导航 为了分析Bootstrap源码,所以的先把CSS选择器相关的东东给巩固好 废话就不多说了 CSS 2.1 selectors, Part 1 计算指定选择器的优先 ...

  5. css权重及优先级问题

    css权重及优先级问题 几个值的对比 初始值 指定值 计算值 应用值 CSS属性的 指定值 (specified value)会通过下面3种途径取得: 在当前文档的样式表中给这个属性赋的值,会被优先使 ...

  6. [程序猿入行必备]CSS样式之优先级

    专业玩家请移步:http://www.w3.org/TR/CSS2/cascade.html 使用CSS控制页面样式时,常常出现设定的样式被"覆盖",不能生效的情况. 浏览器是根据 ...

  7. CSS 选择器及其优先级

    CSS 的选择器有很多类型,我们将常用的这些列表如下: 一.CSS 选择器的类别 1. 基本选择器 基本选择器 解释 备注 * 通用选择器,匹配所有元素 CSS2 E 元素选择器,匹配类型为 E 的所 ...

  8. CSS样式的优先级

    1.相同权值情况下,CSS样式的优先级总结来说,就是--就近原则(离被设置元素越近优先级别越高): 内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中). 2.权 ...

  9. css样式引入优先级？

    css中的优先级讲的有 1.选择器的优先级. 2.样式引入的优先级. 今天要研究的是样式引入的优先级.网上又很多答案都是如下的,但是真的是这样的吗,让我们来探一探究竟是如何. 四种样式的优先级别是:行 ...

随机推荐

  1. go语言笔记1

    Go语言学习整理 本文基于菜鸟教程,对于自己不明白的点加了点个人注解,对于已明确的点做了删除,可能结构不太清晰,看官们可移步Go语言教程 1    Go语言结构当标识符(包括常量.变量.类型.函数名. ...

  2. 业余时间折腾了个微信小程序版本的街机游戏模拟器（吾爱街机），8090后的童年回忆，欢迎大家体验

    好多年没来博客园了,有段时间想玩街机游戏,发现都需要下载安装,现在小程序这么流行,是不是可以集成到小程序里(无需下载,在线玩),出于这想法,就业余时间折腾了下,分享给大家,偶尔可以回味畅玩下. 中间遇 ...

  3. ThinkPHP模型中的HAS_ONE,BELONG_TO,HAS_MANY实践

    因为很熟悉DJANGO,所以对TP,要慢慢适应. 1,SQL文件 /* Navicat MySQL Data Transfer Source Server : localhost_3306 Sourc ...

  4. Linux TTY函数跟踪

    1. 介绍 本文介绍了TTY打开.TTY读和TTY写操作的函数跟踪过程 2. 示例 下面是一个简单的Linux TTY打开和读写过程 #include <termios.h> #inclu ...

  5. python无法导入自己的模块的解决办法

  6. Apache Solr < 8.2.0远程命令执行漏洞（CVE-2019-0193）

    介绍:Apache Solr 是一个开源的搜索服务器.Solr 使用 Java 语言开发,主要基于 HTTP 和 Apache Lucene 实现. 漏洞原因:此次漏洞出现在Apache Solr的D ...

  7. 干货 | 10分钟带你全面掌握branch and bound（分支定界）算法-概念篇

    00 前言 之前一直做启发式算法,最近突然对精确算法感兴趣了.但是这玩意儿说实话是真的难,刚好boss又叫我学学column generation求解VRP相关的内容.一看里面有好多知识需要重新把握, ...

  8. AC自动机入门经典题目（两种表达方式）

    Keywords Search 指针方式: /* Keywords Search */ # include <iostream> # include <stdio.h> # i ...

  9. 记一次CDH集群日志数据清理

    背景 集群运行一段时间(大概一月多)后,cloudera manager管理界面出现爆红,爆红的组件有hdfs.zookeeper. 发现问题 点击详细内容查看,报日志空间不够的错误.初步判断是各个组 ...

  10. SqlServer 数据库同步的两种方式 (发布、订阅)，主从数据库之间的同步

    最近在琢磨主从数据库之间的同步,公司正好也需要,在园子里找了一下,看到这篇博文比较详细,比较简单,本人亲自按步骤来过,现在分享给大家. 在这里要提醒大家的是(为了更好的理解,以下是本人自己理解,如有错 ...