CSS樣式的優先順序詳解

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

操作方法

（01）同級別的樣式，後面寫的樣式，肯定會比前面的更優先。（在樣式裡不新增!important屬性的情況）程式碼如圖

（02）執行頁面，可以看到我們第一個p的文字顏色是後面定義的紅色，優先順序高，把前面定義的黒色覆蓋了。

（03）如果把樣式類名，改成用ID定義的樣式呢，如圖

（04）可以看到，現在第一個p的文字是黑色的，雖然用ID定義的樣式是先寫，但ID比類具有更高的優先順序，後寫的類樣式覆蓋不了這個ID定義的樣式。

（05）在用類做樣式定義時，層級較多的，優先順序比層級少的更高，程式碼如圖，第一個樣式用了二層去定義類為A的樣式，它比第二個樣式（層級只有一層）有更高級別。

（06）執行後，可以看到現在文字的樣式是第一個樣式定義的藍色字型。

（07）再介紹一種比較特殊的情況，就是樣式里加了 !important屬性的樣式，是優先順序最高的，不管是ID定義的樣式，還是層級較多的類定義的樣式，都比這個屬性的優先順序低。程式碼如圖

（08）執行頁面後，可以看到，現在第一個p的文字是紅色，就是加了 !important屬性的樣式定義的顏色，該樣式優先順序最高。