CSS樣式表中的優先權

1、特殊性

首先來看一下這個例子將會發生的情形:

1 .grape { color:Blue; }              
2 H1 { color: Red; }                 
3 <h1 class="grape">Meerkat <em>Central</em></h1>

H1和.grape都匹配上面的H1元素，那麼到底應該使用哪一個呢？實踐證明.grape是正確答案，把句子顯示為藍色。根據規範，一般的 HTML元素選擇符(H1,P 等)具有特殊性1，類選擇符具有特殊性10，ID選擇符具有特殊性100，值越大權重就越大，就優先選用。

1 H1 { color: Red; }                  /* 特殊性 = 1 */                  
2 P EM { color: Blue; }               /* 特殊性 = 2  */             
3 .grape { color: Fuchsia; }            /* 特殊性 = 1 0 */             
4 P.bright { color: Yellow; }            /* 特殊性 = 11 */             
5 P.bright EM.dark{ color: Gray; }       /* 特殊性 = 12 */             
6 #ID01 { color: Red; }                /* 特殊性 = 100 */