1-6. CSS優先權問題 ...
優先權問題
以 CSS 撰寫位置來比較
行內 CSS 樣式 > 文件樣式
【文件樣式】分：【外部獨立儲存的 CSS 檔案】(連結式) 及【HTML檔案中的 <style> 區域】(內嵌式)
如果 CSS 規則名稱是一樣的，原則上二者的規則名稱優先權是一樣的，而後者會取代前者。
以 CSS 規則名稱來比較
原則上 ID 名稱 > class 名稱 > tag 標籤名稱
<style>
#testarea { background-color:green; } /* 在ID名稱中, 設定為綠色背景 */
.block { background-color:blue; } /* 在class名稱中, 設定為藍色背景 */
div { background-color:red; } /* 在標籤名稱中, 設定為紅色背景 */
main .block { background-color:yellow; } /* 在複合規則中, 設定為黃色背景 */
main div { background-color:gray; } /* 在複合規則中, 設定為灰色背景 */ </style>
</html>
<body>
<main>
<div id="testarea" class="block"> 這裡是測試區域 </div>
</main> </body>
優先權重比例分數
權重比例： ID * 100， class * 10， 標籤 * 1， ——– 行內樣式 * 1000
| 權重計算結果： |
|
※如果在屬性內容值的後面加 !important 則優先權更高，比行內樣式高 (猶如 * 10000)。
撰寫方式例如：div { background-color:red !important; }
如果選取器名稱中有:冒號類時，例如 :hover， :nth-of-type(n)， ::before ...， 這些雷同 class 名稱 * 10。
瀏覽器支援狀況
參考網站 - 瀏覽器的支援狀況 - 列表介紹
w3schools.com CSS Browser Support Reference 、 菜鳥教程 runoob.com CSS3 瀏覽器支持參考手冊