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

<!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. 剑指offer--10.最小的K个数

    边界判断,坑了一下 ----------------------------------------------- 时间限制:1秒 空间限制:32768K 热度指数:375643 本题知识点: 数组 ...

  2. nyoj-1016-德莱联盟（向量叉乘判断线段相交）

    叉乘的坐标表示: A(X1,Y1), B(X2, Y2), C(XC,YC), D(XD, YD);AB = (X2-X1, Y2-Y1);CD = (XD-XC, YD-YC); 向量AB,CD的叉 ...

  3. 加密算法之BLOWFISH算法

    加密信息 BlowFish算法用来加密64Bit长度的字符串. BlowFish算法使用两个"盒"--ungignedlongpbox[18]和unsignedlongsbox[4 ...

  4. Java进阶知识点2：看不懂的代码 - 协变与逆变

    一.背景 要搞懂Java中的协办与逆变,不得不从继承说起,如果没有继承,协变与逆变也天然不存在了. 我们知道,在Java的世界中,存在继承机制.比如MochaCoffee类是Coffee类的派生类,那 ...

  5. Network Saboteur （深搜递归思想的特殊使用）

    个人心得:对于深搜的使用还是不到位,对于递归的含义还是不太清楚!本来想着用深搜构成一个排列,然后从一到n分割成俩个数组,然后后面发现根本实现不了,思路太混乱.后来借鉴了网上的思想,发现用数组来标志,当 ...

  6. kong插件官方文档翻译

    kong插件官方文档翻译 目录 介绍 文件结构 编写自定义逻辑 存储配置 访问数据存储 自定义实体 缓存自定义实体 扩展Admin API 编写测试 (卸载)安装你的插件 插件开发 - 介绍 什么是插 ...

  7. Bootstrap确定样式让屏幕缩小后布局不乱

    解决方案是如下 结果如下:

  8. linux NTP配置

    时间是由计算机内的石英晶体振荡电路以:NetworkTimeProtocol(NTP):通常情况下,时间同步是按以下步骤进行的::(1):NTP客 户端向NTP服务器发出一个时间请:(2):当服务器接 ...

  9. [转]【技术心得】Last-Modified,Etag,Expire区别

    Last-Modified 是什么 Last-Modified 是 HttpHeader 中的资源的最后修改时间,如果带有 Last-Modified ,下一次发送 Http 请求时,将会发生带 If ...

  10. Day3-Python基础3--默认参数和参数组

    一.默认参数 先看下下面的代码: def stu_register(name,age,country,course): print("----注册学生信息------") prin ...