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/

 

 

如果覺得對你有幫助的話. 麻煩幫小弟按個讚哦~

 

相關文章參考:

網站開發工具清單 (持續更新中...) 

arrow
arrow

    newaurora 發表在 痞客邦 留言(0) 人氣()