[轉載]CSS的明確性(Specificty)
原始文章：http://www.htmldog.com/guides/cssadvanced/specificity/
如果你對某個標籤元素，設定了兩個（或更多）具有衝突的CSS設定，瀏覽器會去遵循一些基本的規範，來決定使用哪個CSS設定。
這個看似不是很重要，而且在大多情況下，你並不會碰到這樣的衝突。但當你的CSS設定規模漸漸變得越來越大，越來越複雜時；或者開始修改舊版本的CSS檔案時，就有可能發生衝突了。
如果選擇符(selectors)都一樣，那麼後者的選擇符將優先於最先的選擇符。像以下的範例，如果你這樣設定：
p { color: red; }
p { color: blue; }
p標籤的顏色屬性將會是藍色，因為遵循了『後者優先』的規則。
然而，你不會選擇使用衝突宣告效果一樣的選擇符（因為那裡沒有大量的點），讓衝突完全合理的發生。不過，當你使用了巢狀選擇符，於以下的例子中：
div p { color: red; }
p { color: blue; }
也許看起來p標籤是置於div標籤內時，p標籤的顏色將會是藍色。依照『後者優先』看起來是這樣，但事實上他們會選用指定為紅色的第一個選擇符。基本上，更具體的選擇符，所造成的衝突才是本文要談論的主題。
實際上，選擇符個別都持有一個優先值。基本上，如果你使用的是id選擇符("#id名稱") 他的優先值是100；每個類(class)選擇符(".類名稱") 的優先值是10；而HTML標籤選擇符（任何HTML名稱）的優先值是1。當使用更具體的選擇符的時候，依照上述的數值將之總和，就可以得到該選擇符的優先值了。
- p ：的優先值是1（1個html選擇符）
- div p ：的優先值是2（2個html選擇符；1+1）
- .tree ：的優先值是10（1個類選擇符）
- div p.tree ：的優先值是12（兩個html選擇符與1個類選擇符；1+1+10）
- #baobab ：的優先值是100（1個id選擇符）
- body #content .alternative p ：的優先值是112（1個html選擇符，id選擇符，類選擇符，html選擇符；1+100+10+1）
所以依照上面列表的範例，div p.tree（優先值12） 的優先權就高於div p（優先值2）；body #content .alternative p（優先值112）的優先權就高於上述全部的範例。而不會依照『後者優先』的規則。
|