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

<!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. TreeView的用法总结

    1.循环往treeview中添加数据 public AuthorNavUserControl() { InitializeComponent(); LoadTrees(MainForm.Project ...

  2. tf.random_normal()函数

    tf.random_normal()函数用于从服从指定正太分布的数值中取出指定个数的值. tf.random_normal(shape, mean=0.0, stddev=1.0, dtype=tf. ...

  3. libmodbus相关资料整理

    /****************************************************************************** * libmodbus相关资料整理 * ...

  4. windows下matplotlib的安装

    在上一篇中我想用matplotlib,无奈一直装不上,就在卸了又装装了又卸,反反复复之后,终于装好了. 初学python,首先就装了numpy,倒也没有多复杂,有需要的朋友可以直接http://sou ...

  5. UVA - 11324 The Largest Clique (强连通缩点+dp)

    题目链接 题意:从有向图G中找到一个最大的点集,使得该点集中任意两个结点u,v满足u可达v或v可达u. 解法:先把同处于一个强连通分量中的结点合并(缩点),得到一张DAG图,在DAG上dp即可. 感觉 ...

  6. LeetCode Max Consecutive Ones II

    原题链接在这里:https://leetcode.com/problems/max-consecutive-ones-ii/ 题目: Given a binary array, find the ma ...

  7. 普通平衡树 - Treap

    怕被学弟怼 : "你的博客上没有Treap模板啊?" #include <cstdio> #include <cstring> #include <a ...

  8. 橱窗布置（Flower）（动规）

    橱窗布置(Flower) [问题描述]         假设以最美观的方式布置花店的橱窗,有F束花,每束花的品种都不一样,同时,至少有同样数量的花瓶,被按顺序摆成一行,花瓶的位置是固定的,并从左到右, ...

  9. zookeeper环境及dubbo-admin管理平台搭建

    一. Zookeeper的安装使用 1.1 Zookeeper介绍 Zookeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hb ...

  10. hdu 1028 && hdu 1398 && hdu 1085 && hdu 1171 ——生成函数

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1028 就是可以用任意个1.2.3....,所以式子写出来就是这样:(1+x+x^2+...)(1+x^2+ ...