---恢复内容开始---
<!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代码写在前面后面没有关系。