CSS樣式的優先級詳解

在做網頁開發，基本上都會處理CSS樣式的，css樣式的優先級大家都弄清楚了嗎？如果不清楚，自己寫的樣式為什么被覆蓋了都不知道的。下面一起來了解下。

操作方法

01
同級別的樣式，后面寫的樣式，肯定會比前面的更優先。（在樣式里不添加!important屬性的情況）
代碼如圖
02
運行頁面，可以看到我們第一個p的文字顏色是后面定義的紅色，優先級高，把前面定義的黒色覆蓋了。
03
如果把樣式類名，改成用ID定義的樣式呢，如圖
04
可以看到，現在第一個p的文字是黑色的，雖然用ID定義的樣式是先寫，但ID比類具有更高的優先級，后寫的類樣式覆蓋不了這個ID定義的樣式。
05
在用類做樣式定義時，層級較多的，優先級比層級少的更高，代碼如圖，第一個樣式用了二層去定義類為A的樣式，它比第二個樣式（層級只有一層）有更高級別。
06
運行后，可以看到現在文字的樣式是第一個樣式定義的藍色字體。
07
再介紹一種比較特殊的情況，就是樣式里加了 !important屬性的樣式，是優先級最高的，不管是ID定義的樣式，還是層級較多的類定義的樣式，都比這個屬性的優先級低。代碼如圖
08
運行頁面后，可以看到，現在第一個p的文字是紅色，就是加了 !important屬性的樣式定義的顏色，該樣式優先級最高。
End