CSS權重範例說明
在網頁撰寫的時候，經常會遇到寫CSS時
我明明要背景黑色，結果給我出現綠色；字的大小要15px，又偏偏來個12px，讓人為之光火
這些都是CSS的優先權的問題，下面列出幾個常見的狀況讓大家參考參考
1. 定義樣式的元素越多大於定義樣式少的元素
例如：
A. div{ background-color:blue; }
B. body > div{ background-color:yellow; }
C. body div span{ background-color:black; }
結果：背景變成黑色 ( 權重：C > B > A )
說明：因為C的樣式定義影響的元素多於B多於A
2. id 的優先權大於class，class的優先權又大於元素(例如：div、body、span)
例如：
A. #blue{ background-color:blue; }
B. .red{ background-color:red; }
C. div{ background-color:black; }
<div id="blue" class="red" width="350px" height="500px">1</div>
結果：背景變成藍色 ( 權重：A > B > C )
說明：因為id大於class也大於元素div，所以在CSS樣式會使用id的樣式
3. 如果有相同的樣式被定義，瀏覽器會採用範圍最小的樣式
例如：
A. <link rel="stylesheet" href="style.css" type="text/css">這個引入的CSS檔內定義 body{ font-size:14px; }
B. 標頭檔內 <style>body{ font-size:20px; }</style>
C. 在最後 <div id="blue" class="red" style="font-size:50px">1</div>
結果：在 div 區塊內的字都會是 50px的大小 ( 權重：C > B > A )
說明：因為瀏覽器把範圍最小的div的CSS定義當做最終呈現的樣式
4. 如果有相同的樣式被定義，瀏覽器會採用最後一個被定義的樣式
例如：
A. 在程式的第10行載入了body{ font-size:50px }
B. 在程式的第210行載入了body{ font-size:20px }
結果：在 body內的字都會是 20px的大小 ( 權重：B > A )
說明：因為瀏覽器把最後一個被定義的樣式當做最終呈現的樣式
另外也找到了下面幾個有趣的網站
大家也可以參考看看
CSS 權重計算工具http://specificity.keegan.st/
說明：越前面的數字權重越高、每一格的權重最高為2
CSS 權重圖解說明 http://cssspecificity.com/
如果覺得對你有幫助的話. 麻煩幫小弟按個讚哦～
相關文章參考：
留言列表
