CSS設計的權重/優先權問題

CSS設計的權重/優先權問題

mini_b 以 CSS 撰寫位置來比較

行內 CSS 樣式】 > 【文件樣式

【文件樣式】分:【外部獨立儲存的CSS檔案】(連結式)及【HTML檔案中的<style>區域】(內嵌式)

如果CSS規則名稱是一樣的,原則上二者的規則名稱優先權是一樣的,而後者會取代前者

例如:

 

mini_b 以 CSS 規則名稱來比較

原則上,【ID名稱】 > 【class名稱】 > 【標籤名稱

例如:

結果:第2行#header > 第5行body .block > 第3行.block > 第6行body div > 第4行div

權重比例:ID * 100,  class * 10, 標籤 * 1, ——– 行內樣式 * 1000

權重計算結果: 0,1,0,0  >  0,0,1,1  >  0,0,1,0  >  0,0,0, 2  >  0,0,0,1

※如果在屬性內容值的後面加  !important 則優先權更高,比行內樣式高 (猶如 * 10000)。

撰寫方式例如:div { background-color:red !important; }

TSindex_3_003範例參考