博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
通过id设置的css属性和通过元素设置的css属性冲突了,优先级哪个高?
阅读量:5052 次
发布时间:2019-06-12

本文共 750 字,大约阅读时间需要 2 分钟。

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

    div test    

以上代码先是设置了所有的div的背景色是蓝色,这样body中的三个div的背景色就都是蓝色的了,后来又通过id的形式设置了main这个div的背景色是red,这个属性会覆盖掉通过div设置的蓝色背景,footer也是一样的道理。

可如果是这样结果是什么样子的呢?

    div test    

main和footer这两个div的颜色最后会是蓝色的吗?经过chrome测试,发现并没有。

这说明浏览器渲染html的时候并不是从上到下按照css代码的编写顺序执行的,而是id的css属性会覆盖掉元素的css属性,和css代码写在前面后面没有关系。

 

---恢复内容结束---

    div test    

以上代码先是设置了所有的div的背景色是蓝色,这样body中的三个div的背景色就都是蓝色的了,后来又通过id的形式设置了main这个div的背景色是red,这个属性会覆盖掉通过div设置的蓝色背景,footer也是一样的道理。

可如果是这样结果是什么样子的呢?

    div test    

main和footer这两个div的颜色最后会是蓝色的吗?经过chrome测试,发现并没有。

这说明浏览器渲染html的时候并不是从上到下按照css代码的编写顺序执行的,而是id的css属性会覆盖掉元素的css属性,和css代码写在前面后面没有关系。

 

转载于:https://www.cnblogs.com/yfish/p/6390031.html

你可能感兴趣的文章
pymysql操作mysql
查看>>
Linux服务器删除乱码文件/文件夹的方法
查看>>
牛腩记账本core版本源码
查看>>
Word Break II
查看>>
UVA 11082 Matrix Decompressing 矩阵解压(最大流,经典)
查看>>
jdk从1.8降到jdk1.7失败
查看>>
一些关于IO流的问题
查看>>
mongo备份操作
查看>>
8 -- 深入使用Spring -- 3...1 Resource实现类InputStreamResource、ByteArrayResource
查看>>
硬件笔记之Thinkpad T470P更换2K屏幕
查看>>
一个关于vue+mysql+express的全栈项目(六)------ 聊天模型的设计
查看>>
【知识库】-数据库_MySQL 的七种 join
查看>>
.net 写文件上传下载webservice
查看>>
noSQL数据库相关软件介绍(大数据存储时候,必须使用)
查看>>
iOS开发——缩放图片
查看>>
HTTP之URL的快捷方式
查看>>
满世界都是图论
查看>>
配置链路聚合中极小错误——失之毫厘谬以千里
查看>>
代码整洁
查看>>
蓝桥杯-分小组-java
查看>>