WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

1-10. CSS 設計的優先權問題

以 CSS 撰寫位置來比較

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

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

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

例如:

<link href="layout.css" rel="stylesheet"> 
<!-- 在layout.css檔案中設定 body 為紅色背景 -->

<style type="text/css">
/* 在style文件樣式區中, 設定 body 為藍色背景 */
body {                   
  background-color:blue; 
  /* 這裡的設定會取代第1行內的設定,結果是藍色的 */
}
</style>
</head>

<body style="background-color:green;">
<!-- 在 body 標籤行內設定的 style 優先權最高,所以結果為 green 綠色背景 -->

以 CSS 規則名稱來比較

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

例如:

<style type="text/css"> 
#header     { background-color:green;  }   /* 在ID名稱中, 設定為綠色背景 */
.block      { background-color:blue;   }   /* 在class名稱中, 設定為藍色背景 */
div         { background-color:red;    }   /* 在標籤名稱中, 設定為紅色背景 */
body .block { background-color:yellow; }   /* 在複合規則中, 設定為黃色背景 */
body div    { background-color:gray;   }   /* 在複合規則中, 設定為灰色背景 */
</style>
</head>

<body>
<div id="header" class="block"> 這裡是頁首區塊 </div>
</body>

 

結果:第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; }

如果選取器名稱中有:冒號類時,例如 :hover, :nth-of-type(n), ::before ...,這些雷同class名稱 * 10

範例參考

go TOP