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