通过id设置的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代码写在前面后面没有关系。
---恢复内容结束---
<!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属性冲突了，优先级哪个高？的更多相关文章
- 黑马vue---16、vue中通过属性绑定为元素设置class类样式
黑马vue---16.vue中通过属性绑定为元素设置class类样式 一.总结 一句话总结: 这里就是为元素绑定class样式,和后面的style样式区别一下 vue中class样式绑定方式的相对于原 ...
- 第二章 Vue快速入门-- 15 vue中通过属性绑定为元素设置class类样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- vue通过属性绑定为元素设置class样式
第一种方式,直接传递一个数组,注意使用v-bind绑定 <h1 :class="['red','size'">这是一个h1文本</h1&g ...
- from表单、css选择器、css组合器、字体样式、背景属性、边框设置、display设置
目录 一.form表单 1.form表单功能 2.表单使用原理 二.前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2. ...
- web前端学习（三）css学习笔记部分（1）-- css入门基础知识+基本样式
1.介绍及语法 1.1CSS概述: CSS指层叠样式表 CSS样式表极大地提高了工作效率 如果值大于一个单词,需要加上引号(意思是值只有一个的时候可以不加引号) 1.2CSS高级语法 1.选择器分组 ...
- 解决子元素设置margin-top，效果到父元素上的问题
有时当我们设置子元素的margin-top,但是却发现子元素没有出现上外边距的效果,反而是父元素出现了上外边距的效果. 这种问题的解决方法如下: 1.给父元素加边框. 2.给父元素设置padding- ...
- CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- CSS和SVG中的剪切——clip-path属性和<clipPath>元素
剪切是什么 剪切是一个图形化操作,你可以部分或者完全隐藏一个元素.被剪切的元素可以是一个容器也可以是一个图像元素.元素的哪些部分显示或隐藏是由剪切的路径来决定的. 剪切路径定义了一个区域,在这个区域内 ...
- Jquery css函数用法(判断标签是否拥有某属性)
判断一个层是否隐藏:$("#id").css("display")=="none" ;在所有匹配的元素中,设置一个样式属性的值:$(&qu ...
随机推荐
- LSTM与Highway-LSTM算法实现的研究概述
LSTM与Highway-LSTM算法实现的研究概述 zoerywzhou@gmail.com http://www.cnblogs.com/swje/ 作者:Zhouwan 2015-12-22 ...
- 19 Python 正则模块和正则表达式
什么是模块? 常见的场景:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. 但其实import加载的模块分为四个通用类别: 1 使用python编写的代码(.p ...
- UnityGUI扩展实例：图片挖洞效果 Mask的反向实现
转载自 https://www.taidous.com/forum.php?mod=viewthread&fid=211&tid=55259 我想大家在用uGUI做界面时,可能经常会碰 ...
- lamp script
centos6 ,不区分32位,64位, 要求机器可以上外网. 支持lamp 和 lnmp, mysql支持5.1和5.6两个版本,php支持5.3和5.6两个版本,apache2.2,nginx1. ...
- java入门学习（1）一简介及其基础特点
分类: java基础 1.为什么java如此流行,为什么历史选择了它? 因为它拥有全新的编程思想,更接近人们的语言习惯,由于其编译器把代码编译成字节码,然后再不同的平台上运行分别用不同的虚拟机去解释字 ...
- 在Arcmap中加载互联网地图资源的4种方法（转载）
前一段时间想在Arcmap中打开互联网地图中的地图数据,如影像数据.基础地图数据等,经过简单研究目前总结了四种方法,整理下与大家分享,有些内容可能理解有误,希望大家多多指教.4种方法如下: a) ...
- 《Javascript高级程序设计》阅读记录（四）：第五章 下
这个系列,我会把阅读<Javascript高级程序设计>之后,感觉讲的比较深入,而且实际使用价值较大的内容记录下来,并且注释上我的一些想法.做这个一方面是提升了我的阅读效果以及方便我以后阅 ...
- Python函数-compile()
compile(source, filename, mode[, flags[, dont_inherit]]) 作用: 将source编译为代码或者AST对象.代码对象能够通过exec语句来执行或者 ...
- FastAdmin 的 Bootstrap-Table 如何合并字段？
FastAdmin 的 Bootstrap-Table 如何合并字段? ★hey-成都 14:13:34 把下面那个字段合并到上面那个字段是用什么方法 ^★暗物质-江西 14:17:21 city加上 ...
- mysql之 Innobackupex全备恢复（原理、演示）
一. Innobackupex恢复原理 After creating a backup, the data is not ready to be restored. There might b ...