網頁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;   
}

 

在標籤

，首先應用的是#navigation，當#navigation不存在時應用.powerHeader樣式，最後才是樣式。

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

 

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