CSS樣式疊加
阿新 • • 發佈：2020-07-10
CSS可以把多個樣式加到同一個元素上。如果多個樣式有重合，瀏覽器會根據權重的大小進行樣式覆蓋，這就是層疊樣式表的由來。
下面我們先來看一下疊加是怎麼回事。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* id選擇器權重最大，放在Elements的最上面 */ #div { background: blue; } /* class選擇器權重比ID選擇器小，但是比id選擇器大，所以background會被覆蓋 */ .div { font-size: 20px; background: red; } /* 元素選擇器權重最小，所以font-size和background會被覆蓋*/ div { padding: 10px; font-size: 14px; background: red; } </style> </head> <body> <div class="div" id="div"> Hello CSS </div> </body> </html>
可以理解為權重小的先應用，然後再拿權重大的樣式去覆蓋同名小的樣式。
在瀏覽器的Elements中，權重大的永遠在上面，並且，被覆蓋了的樣式也會特殊標記出來。