通过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>

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

<!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代码写在前面后面没有关系。