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

<!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. Unity3D 自动寻路入门指南

    所有用于成为NavMesh的网格都必须被指定为 Navigation Static . 方法如下,选中GameObject,然后在菜单栏的[Window]-[Navigation]-[Object]- ...

  2. uva120 Stacks of Flapjacks (构造法)

    这个题没什么算法,就是想出怎么把答案构造出来就行. 思路:越大的越放在底端,那么每次就找出还没搞定的最大的,把它移到当前还没定好的那些位置的最底端,定好的就不用管了. 这道题要处理好输入,每次输入的一 ...

  3. SQL夯实基础(三):聚合函数详解

    一.GROUP BY  Having 聊聚合函数,首先肯定要弄清楚group by 和having 的用法. SELECT id, COUNT(course) as numcourse, AVG(sc ...

  4. <Yii 学习>写入日志

    $postStr ='test:'.(empty( $GLOBALS["HTTP_RAW_POST_DATA"])?'':$GLOBALS["HTTP_RAW_POST_ ...

  5. 学习动态性能表(18)--v$system_event

    学习动态性能表 第18篇--V$SYSTEM_EVENT  2007.6.13 本视图概括了实例各项事件的等待信息.v$session_wait显示了系统的当前等待项,v$system_event则提 ...

  6. angular +H5 上传图片 与预览图片

    //index.html <form class="form-horizontal"> <div class="panel panel-default& ...

  7. sleep(0)作用

    假设现在是 2008-4-7 12:00:00.000,如果我调用一下 Thread.Sleep(1000) ,在 2008-4-7 12:00:01.000 的时候,这个线程会 不会被唤醒?某人的代 ...

  8. Day3-Python基础3---函数递归和函数式方程

    一.函数的递归 在函数内部,可以调用其他函数.如果一个函数在内部调用自身本身,这个函数就是递归函数. 递归特性: 1. 必须有一个明确的结束条件 2. 每次进入更深一层递归时,问题规模相比上次递归都应 ...

  9. PostgreSQL 监控数据库活动

    监控数据库活动 1. 标准Unix 工具 [root@mysqlhq ~]# ps auxww | grep ^postgrespostgres 12106 0.0 0.0 340060 15064 ...

  10. c# 实用精华知识点全解

    本文介绍c#的实用知识点 写在前面(通识) vs常用快捷键 F5 调试运行程序 ctrl F5 不调试运行程序 F11 逐条语句调试 F10 逐过程调试程序 注释快捷键 ctrl + k + c 代码 ...