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

<!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. 经典SQL语句(转载)

    一.基础 1.说明:创建数据库 CREATE DATABASE database-name 2.说明:删除数据库 drop database dbname 3.说明:备份sql server --- ...

  2. "Cannot declare member function ...to have static linkage"错误

    英文解释: if you declare a method to be static in your .cc file. The reason is that static means somethi ...

  3. Jupyterhub Error 503: Proxy Target Missing

    Jupyterhub Error 503: Proxy Target Missing 请求太频繁

  4. [基本操作] Mobius 反演， Dirichlet 卷积和杜教筛

    Dirichlet 卷积是两个定义域在正整数上的函数的如下运算,符号为 $*$ $(f * g)(n) = \sum_{d|n}f(d)g(\frac{n}{d})$ 如果不强调 $n$ 可简写为 $ ...

  5. Scala 面向接口编程

    1.如果要实现一个接口,前边没有extends关键字就可以使用extends,如果有要使用with关键字 2.Scala 中的接口支持多种继承,类或者抽象类不支持多种继承 3.抽象属性:未被实例化的属 ...

  6. 五、python沉淀之路--字典

    一. 1.根据序列,创建字典,并指定统一的值 v = dict.fromkeys(["],222) print(v) {': 222} 2.根据key 获取值,key不存在时,报错:get方 ...

  7. 页面报错Uncaught SyntaxError: Unexpected identifier

    错误描述:未捕获的语法错误:意想不到的标识符. 如图所示:检查之后发现是页面js内缺少“,”引起的.添加之后就OK了.

  8. dockerfile http_php

    FROM centos6.6-php5.5:0.0.1 MAINTAINER syberos:wangmo RUN mv /etc/php.ini /etc/php.ini.bak COPY ./ph ...

  9. Day2-Python基础2---字符串操作

    一.字符串操作 特性:不可修改 name = "my \tname is {name} and i am {year} old" #首字母大写.capitalize print(n ...

  10. [转] linux 启动文件及设置环境变量

    系统级启动文件  ==================================== 1./etc/rc  主启动文件,不要修改它 2./etc/rc.conf  决定启动哪些系统自带的守护进程 ...