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

以上代碼先是設置了所有的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代碼寫在前面后面沒有關系。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM