通过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 ...
随机推荐
- Unity3D 自动寻路入门指南
所有用于成为NavMesh的网格都必须被指定为 Navigation Static . 方法如下,选中GameObject,然后在菜单栏的[Window]-[Navigation]-[Object]- ...
- uva120 Stacks of Flapjacks （构造法）
这个题没什么算法,就是想出怎么把答案构造出来就行. 思路:越大的越放在底端,那么每次就找出还没搞定的最大的,把它移到当前还没定好的那些位置的最底端,定好的就不用管了. 这道题要处理好输入,每次输入的一 ...
- SQL夯实基础（三）：聚合函数详解
一.GROUP BY Having 聊聚合函数,首先肯定要弄清楚group by 和having 的用法. SELECT id, COUNT(course) as numcourse, AVG(sc ...
- <Yii 学习>写入日志
$postStr ='test:'.(empty( $GLOBALS["HTTP_RAW_POST_DATA"])?'':$GLOBALS["HTTP_RAW_POST_ ...
- 学习动态性能表(18)--v$system_event
学习动态性能表 第18篇--V$SYSTEM_EVENT 2007.6.13 本视图概括了实例各项事件的等待信息.v$session_wait显示了系统的当前等待项,v$system_event则提 ...
- angular +H5 上传图片 与预览图片
//index.html <form class="form-horizontal"> <div class="panel panel-default& ...
- sleep(0)作用
假设现在是 2008-4-7 12:00:00.000,如果我调用一下 Thread.Sleep(1000) ,在 2008-4-7 12:00:01.000 的时候,这个线程会 不会被唤醒?某人的代 ...
- Day3-Python基础3---函数递归和函数式方程
一.函数的递归 在函数内部,可以调用其他函数.如果一个函数在内部调用自身本身,这个函数就是递归函数. 递归特性: 1. 必须有一个明确的结束条件 2. 每次进入更深一层递归时,问题规模相比上次递归都应 ...
- PostgreSQL 监控数据库活动
监控数据库活动 1. 标准Unix 工具 [root@mysqlhq ~]# ps auxww | grep ^postgrespostgres 12106 0.0 0.0 340060 15064 ...
- c# 实用精华知识点全解
本文介绍c#的实用知识点 写在前面(通识) vs常用快捷键 F5 调试运行程序 ctrl F5 不调试运行程序 F11 逐条语句调试 F10 逐过程调试程序 注释快捷键 ctrl + k + c 代码 ...