---恢復內容開始---
<!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代碼寫在前面后面沒有關系。