在編寫CSS代碼的時候，我們會出現多個樣式規則作用于用一個元素的情況，例如

復制代碼代碼如下:
header>
<nav class=”nav-main” id=”navigation”>Here background</nav>
</header>
header nav {
background-color: red;
}#navigation { background-color: green;}</p>
<p>.nav-main {
background-color: blue;
}

以上三個樣式規則都會作用于 ID 值為 "navigation" 的 nav 標簽，最終哪個樣式規則會生效呢，這取決于選擇器的特殊性(或優先級)高低，選擇器特殊性高的樣式會覆蓋特殊性低的樣式，經過測試 nav 標簽的背景會顯示為 green 綠色。

那么選擇器特殊性是如何計算的呢？

通常，我們使用四個以逗號分隔的數字來表示特殊性，比如:

1.每個元素選擇器貢獻特殊性為 0，0，0，1；
2.每個類、偽類或者屬性選擇器的特殊性為 0，0，1，0；
3.每個ID選擇器的特殊性為 0，1，0，0.
計算一個組合選擇器的特殊性的時候就先計算各種選擇器的數量以及對應的特殊性再相加，比如

復制代碼代碼如下:
div ul ul li /* 0,0,0,4 4個元素選擇器 */</p>
<p>div.aside ul li /* 0,0,1,3 1個類選擇器，3個元素選擇器 */</p>
<p>a:hover /* 0,0,1,1 1個偽類選擇器，1個元素選擇器 */</p>
<p>div.navlinks a:hover /* 0,0,2,2 1個類選擇器，1個偽類選擇器，2個元素選擇器 */</p>
<p>#title em /* 0,1,0,1 1個 ID 選擇器，1個元素選擇器 */</p>
<p>h1#title em /* 0,1,0,2 1個 ID 選擇器，2個元素選擇器 */</p>
<p>* /* 0,0,0,0 1個通用選擇器 */

注：多類選擇器有多少個類就計算多少個類，不支持多類選擇器的 IE6 會理解為一個類

比較選擇器特殊性高低直接從左向右依次比較，數字大的則優先級更高，如果相同就比較下一位，所有位都相同則優先級是一樣高，當選擇器優先級一樣高的時候后申明的樣式會覆蓋前面申明的樣式

每個級別的優先級值是相互獨立的，13個元素選擇器寫在一堆也不會比1個類選擇器的特殊性高

第一個0是用于行內樣式的，且僅用于行內樣式

復制代碼代碼如下:
<nav style=”background-color: gray;”></nav> <!– 1,0,0,0 –>

有一樣東西可以無視特殊性，那就是 !important。使用 !important 可以把任何樣式規則標記為重要

復制代碼代碼如下:
.nav-main {
background-color: blue !important;
color: #666;
}

基本上，任何重要的樣式規則都可以覆蓋沒有標記為重要的樣式規則，

復制代碼代碼如下:
<div id=”gohome”><a href=”/” id=”home”>Home</a></div>