【行內 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 綠色背景 -->
原則上,【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。