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. 团队——Alpha版本发布

    这个作业属于哪个课程 课程链接 这个作业要求在哪里 作业要求的链接 团队名称 杨荣模杰和他的佶祥虎 这个作业的目标 发布并说明产品Alpha版本 一.团队成员的学号姓名列表 学号 姓名 2017311 ...

  2. Python使用pip安装TensorFlow模块

    1.首先确保已经安装python,然后用pip来安装matplotlib模块. 2.进入到cmd窗口下,建议执行python -m pip install -U pip setuptools进行升级. ...

  3. 基于源代码为树莓派设备构建 TensorFlow

    本指南为运行 Raspbian 9.0 操作系统的 Raspberry Pi 嵌入式设备构建 TensorFlow.虽然这些说明可能也适用于其他系列的 Raspberry Pi 设备,但它仅针对此文中 ...

  4. 接口测试-Java代码实现接口请求并封装

    前言:在接口测试和Java开发中对接口请求方法进行封装都非常有必要,无论是在我们接口测试的时候还是在开发自测,以及调用某些第三方接口时,都能为我们调用和调试接口提供便捷: Java实现对http请求的 ...

  5. 002-官网安装openstack之-安装基础服务

    安装openstack基础服务 1.控制节点安装时间同步服务(chrony) (1)时间同步大体来说有两种方式: 一种是自己搭建时间同步服务器,各个需要同步时间的节点,与其同步时间 另一种则是使用nt ...

  6. Django REST framework版本控制

    参考链接:https://www.cnblogs.com/liwenzhou/p/10269268.html 1.路由: #版本控制 re_path('^(?P<version>[v1|v ...

  7. tensorflow2.0 学习（三）

    用tensorflow2.0 版回顾了一下mnist的学习 代码如下,感觉这个版本下的mnist学习更简洁,更方便 关于tensorflow的基础知识,这里就不更新了,用到什么就到网上取搜索相关的知识 ...

  8. javascript 终极循环方法for... of ..推荐

    js目前有很多的循环方法,如for, forEach,  for .. in,  for of 等等,而在ES6里面,我们又增加了一些数据结构,比如set,map,Symbol等. 那么我们该选取哪一 ...

  9. tbls ci 友好的数据库文档化工具

    tbls 是用golang 编写的数据库文档化工具,当前支持的数据库有pg.mysql.bigquery 此工具同时提供了变更对比.lint 校验,生成是markdown格式的 简单使用 安装 mac ...

  10. apache-tomcat安装

    1.下载apache-tomcat 网址:http://tomcat.apache.org 下载 tomcat 9.0.29 2.解压后设置控制台显示中文不乱码 在 apache-tomcat-9.0 ...