---恢复内容开始---

<!DOCTYPE html>

<html>

<head>

    <title>div test</title>

</head>

<style> 

 div{

         height: 300px;

         width:200px;

         background: blue;

 }

#main{

    background: red;

}

#footer{

    background:grey;

}

</style>

<body>

    <div id="header"></div>

    <div id="main"></div>

    <div id="footer"></div>

</body>

</html>

以上代码先是设置了所有的div的背景色是蓝色，这样body中的三个div的背景色就都是蓝色的了，后来又通过id的形式设置了main这个div的背景色是red，这个属性会覆盖掉通过div设置的蓝色背景，footer也是一样的道理。

可如果是这样结果是什么样子的呢？

<!DOCTYPE html>

<html>

<head>

    <title>div test</title>

</head>

<style>

#main{

    background: red;

}

#footer{

    background:grey;

}

 div{

         height: 300px;

         width:200px;

         background: blue;

 }

</style>

<body>

    <div id="header"></div>

    <div id="main"></div>

    <div id="footer"></div>

</body>

</html>

main和footer这两个div的颜色最后会是蓝色的吗？经过chrome测试，发现并没有。

这说明浏览器渲染html的时候并不是从上到下按照css代码的编写顺序执行的，而是id的css属性会覆盖掉元素的css属性，和css代码写在前面后面没有关系。

---恢复内容结束---

<!DOCTYPE html>

<html>

<head>

    <title>div test</title>

</head>

<style> 

 div{

         height: 300px;

         width:200px;

         background: blue;

 }

#main{

    background: red;

}

#footer{

    background:grey;

}

</style>

<body>

    <div id="header"></div>

    <div id="main"></div>

    <div id="footer"></div>

</body>

</html>

以上代码先是设置了所有的div的背景色是蓝色，这样body中的三个div的背景色就都是蓝色的了，后来又通过id的形式设置了main这个div的背景色是red，这个属性会覆盖掉通过div设置的蓝色背景，footer也是一样的道理。

可如果是这样结果是什么样子的呢？

<!DOCTYPE html>

<html>

<head>

    <title>div test</title>

</head>

<style>

#main{

    background: red;

}

#footer{

    background:grey;

}

 div{

         height: 300px;

         width:200px;

         background: blue;

 }

</style>

<body>

    <div id="header"></div>

    <div id="main"></div>

    <div id="footer"></div>

</body>

</html>

main和footer这两个div的颜色最后会是蓝色的吗？经过chrome测试，发现并没有。

这说明浏览器渲染html的时候并不是从上到下按照css代码的编写顺序执行的，而是id的css属性会覆盖掉元素的css属性，和css代码写在前面后面没有关系。

通过id设置的css属性和通过元素设置的css属性冲突了，优先级哪个高？的更多相关文章

  1. 黑马vue---16、vue中通过属性绑定为元素设置class类样式

    黑马vue---16.vue中通过属性绑定为元素设置class类样式 一.总结 一句话总结: 这里就是为元素绑定class样式,和后面的style样式区别一下 vue中class样式绑定方式的相对于原 ...

  2. 第二章 Vue快速入门-- 15 vue中通过属性绑定为元素设置class类样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  3. vue通过属性绑定为元素设置class样式

    第一种方式,直接传递一个数组,注意使用v-bind绑定             <h1 :class="['red','size'">这是一个h1文本</h1&g ...

  4. from表单、css选择器、css组合器、字体样式、背景属性、边框设置、display设置

    目录 一.form表单 1.form表单功能 2.表单使用原理 二.前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2. ...

  5. web前端学习（三）css学习笔记部分（1）-- css入门基础知识+基本样式

    1.介绍及语法 1.1CSS概述: CSS指层叠样式表 CSS样式表极大地提高了工作效率 如果值大于一个单词,需要加上引号(意思是值只有一个的时候可以不加引号) 1.2CSS高级语法 1.选择器分组 ...

  6. 解决子元素设置margin-top，效果到父元素上的问题

    有时当我们设置子元素的margin-top,但是却发现子元素没有出现上外边距的效果,反而是父元素出现了上外边距的效果. 这种问题的解决方法如下: 1.给父元素加边框. 2.给父元素设置padding- ...

  7. CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  8. CSS和SVG中的剪切——clip-path属性和<clipPath>元素

    剪切是什么 剪切是一个图形化操作,你可以部分或者完全隐藏一个元素.被剪切的元素可以是一个容器也可以是一个图像元素.元素的哪些部分显示或隐藏是由剪切的路径来决定的. 剪切路径定义了一个区域,在这个区域内 ...

  9. Jquery css函数用法(判断标签是否拥有某属性)

    判断一个层是否隐藏:$("#id").css("display")=="none"  ;在所有匹配的元素中,设置一个样式属性的值:$(&qu ...

随机推荐

  1. BackBone 源码解读及思考

    说明 前段时间略忙,终于找到时间看看backbone代码. 正如知友们说的那样,backbone简单.随性. 代码简单的看一眼,就能知道作者的思路.因为简单,所以随性,可以很自由的和其他类库大搭配使用 ...

  2. C# WebApi 配置复杂路由不生效的问题

    配置复杂路由不生效是由于优先级的关系,应该把默认路由放在最后. config.Routes.MapHttpRoute( name: "DynamicApi", routeTempl ...

  3. ICE的Glacier2使用

    1.使用Glacier2的步骤:   A.编写一个Glacier2的配置文件,参见样例   B.设置Glacier2的访问鉴权(密码或者证书),passwords文件每行样例"test xx ...

  4. C# XML反序列化与序列化举例:XmlSerializer

    using System; using System.IO; using System.Xml.Serialization; namespace XStream { /// <summary&g ...

  5. 【转】JVM可视化工具插件---Visual GC

    Visual GC是一个Java 内存使用分析与GC收集的可视化工具插件 <插件下载> 一:整个区域分为三部分:spaces.graphs.histogram 1 spaces区域:代表虚 ...

  6. bzoj 3027 [Ceoi2004]Sweet——生成函数

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3027 化式子到 ( \mul_{i=1}^{n}(1-x^(m[i]+1)) ) / (1- ...

  7. liferay-ui:search-container reset cur page 当点列排序时，把当前页号重置为1.

    问题描述: liferay里面要用liferay-ui:search-container 来展示结果集.并要求点列时,可以排序.然后,如果当前页数不为1时,点列排序,自动设置为1. 解决: // 列排 ...

  8. Poj 2421 Constructing Roads(Prim 最小生成树)

    题意:有几个村庄,要修最短的路,使得这几个村庄连通.但是现在已经有了几条路,求在已有路径上还要修至少多长的路. 分析:用Prim求最小生成树,将已有路径的长度置为0,由于0是最小的长度,所以一定会被P ...

  9. 使用Azure Site Recovery把VM批量搬迁到Azure

    Azure Site Recovery可以提供如下服务: Site Recovery 服务:Site Recovery 可以在站点出现故障时,让应用在其他站点继续可用,从而确保业务连续性. Site ...

  10. Annotation之四：注解中的-Xlint:unchecked和 -Xlint:deprecation

    一.-Xlint:unchecked用法 对如下Test.java编译时 package com.dxz.annotation; import java.util.ArrayList; import ...