介紹CSS 基本概念，權重及覆蓋、繼承
承上篇，繼續針對選擇器說明，我們已經知道在CSS指定樣式的型式：

E {color:red;}
選擇器 {類型:參數};

同時知道選擇器可以串連，程式碼都是由上往下讀取並解析
另外之前的文章裡也提到，想要使用CSS的樣式可以用三種不同的方法來讓瀏覽器讀取CSS，分別是 行內、頁面、鍊入(載入式)。

現在知道有這麼多的方法可以指定樣式給在HTML裡的元素，那麼如果出現下面這種情況，瀏覽器要怎麼知道該呈現什麼結果，就要靠權重來區分，就像在軍隊裡要以官階大的長官下的指令算數，在家裡媽媽說了算一樣，CSS也有一套計算選擇器權重的方式。

不然如果像下例，有很多選擇器都選到同一個元素 <p> 最後字會變成什麼顏色呢?

<style>
p{color:red;}
p{color:blue;}
</style>

覆蓋：
首先介紹第一種瀏覽器的判斷方式- 覆蓋。
像這樣，兩個選擇器都指定了 <p> tag 一個說要紅色，另一個要藍色。

最後的結果 p 會是藍色的，越後面寫的CSS會把前面指定同一個 E 的CSS屬性覆蓋掉。
只要是指定到相同的元素，前面的樣式就會被後面的覆寫掉。

接近性
所謂的接近性就是指 CSS在引入時離元素有多近。
我們知道CSS可以用 行內、頁面、鍊入(載入式)三種方法讓 HTML元素套用到CSS。

例：

<link href="css.css" rel="stylesheet" type="text/css" />
(css.css內寫了 p{color:black;})

<style>
p{color:red;}
</style>


<p style="color:blue">text</p>

像這樣，在 body 裡的 p 被三種不同方式載入方式的指定了不同的樣式，依接近性的原則，最接近HTML元素<p> 的是行內的樣式，其次是頁面最後是鍊入式寫在另一個檔案裡的CSS，最後P呈現為藍色。特別是行內的CSS指定，可以當作是禁衛軍、皇帝特別指派，所有其他方式指定的CSS幾乎都不能蓋掉他。

精確性
除了越接近元素的樣式權重越高之外，指定的越精確的選擇器權重也較高，如：

div p#black{color:black;}
div.red p{color:red;}
div p{color:green;}
p{color:blue;}

因為ID是唯一的，.class有可能有很多個，所以#ID的精確性高於 .class，再來被指定在 div後代內的 p也比單純指定 p 來得精確，所以在這個例子裡面，有可能會出現四種顏色的 <p>

<div>
　<p>綠字:我是div 的後代 p，雖然我也是p</p>
　<div class="red"> 
　　<p>紅字:我是帶有.red樣式的div的後代，雖然我也是p，也是div 的後代 p </p>
　　<div> .... <p id="black">黑字：我是有ID的DIV裡的P，雖然我也符合其他條件</p></div>
　</div> 
</div>
<p>藍字：我只符合了 p 的條件。</p>

覆蓋、接近性、精確性，CSS的權重是以這三個大類來居分。
覆蓋就是寫在後面的CSS會蓋到前面指定在同一個元素上的樣式，這個比較單純。

權重比較麻煩的是在精確性上，不是單純有概念而已，實際上是可以算出來這個有多精確(有多重)(誰叫瀏覽器就是個算數字的東西...)

雖然大部分時候在寫CSS時並不容易碰到權重問題，不過有個基本概念可以避免寫出不好維護的CSS碼。選擇器的權重是用倍數等級來算的，實際上是 1:255:65025....

為了好理解，我們用1 , 10 , 100 ,1000 來看精確性代表的權重
上面提到行內樣式，等於1000，因為根本就直接指定在HTML的tag裡，所以幾乎無法覆寫
#ID =100 ,.class=10 ,E和:偽類=1

這個重量的意思其實就是就是精確度，因為選擇器可以無限制的串連下去，同一個HTML元素裡也可以具有無限多個.class,所以精確度就要看你的一個樣式的選擇器裡有幾個這種類型的選擇器，加起來就是整個樣式的權重。

例如:
#id .main div.left a:hover{}
1個#ID, 2個.class ,2個元素(div,a),1個偽類(:hover)
整個權重為 100+20+2+1=0123

好像很複雜，不過不用擔心，其實根本很少人在算這個
運用上只要記得 ID 比 class 重然後選擇器越精確越重就好了。

另外有個異類叫 !important
用在 E{color:red!important;}
只要用了這個指定法，就會一口氣把頁面式及鍊入式CSS的權重拉到行內等級，沒事千萬不要用，免得到時再也沒有任何樣式能蓋過他，要維護時就傷腦筋了。

chibc-blog 同步