網頁css優先順序

網頁中載入多個css樣式檔案，其中一個是Ext庫內建的樣式檔案，裡面對所有標籤定義了一些樣式，導致原有網頁顯示不正確。通過找到對應樣式，重新設定了正確的樣式。將新樣式加到body標籤上，但是出現兩個樣式，Ext樣式仍然有效。最後發現時在設定新樣式的時候沒有加*，導致只對body標籤有用，而對子標籤無效。下面為修改後的樣式

[css]  .diy,  .diy *{      box-sizing: content-box;      -moz-box-sizing : content-box;      -webkit-box-sizing: content-box;  }

當一個標籤被定義多個樣式，而樣式之間出現衝突時，優先順序為“針對ID定義的樣式” > “類定義樣式” > “針對標籤類型定義的樣式”。例如下面幾個樣式

[css] div{      border:2px solid #0000FF;   }      .powerHeader{      border:2px solid #00ff00;   }      #navigation{      border:2px solid #ff0000;   }

在標籤<div id="navigation" class="powerHeader">，首先應用的是#navigation，當#navigation不存在時應用.powerHeader樣式，最後才是div樣式。

同時，單使用link或style定義多個標籤類class之間出現衝突時，會應用定義在最後的那個類。

瞭解css樣式優先順序，能夠在網頁開發中避免許多樣式衝突問題。

