文章出處

前言

通常我們在設置鏈接的一些偽類（link，visited，hover，active）樣式時，要讓不同的狀態顯示正確的樣式，我們需要按一定的順序設置這些偽類的樣式。這里我就按CSS2規范中推薦的順序進行介紹，即 link-visited-hover-active，可記為 LoVe-HAte 。

要想弄明白為什么是這個順序，首先我們需要知道，CSS在確定應當向一個元素應用哪些樣式時，這通常不僅需要考慮繼承，還要考慮聲明的 特殊性，另外需要考慮聲明本身的來源，這個過程就成為層疊。下面我們分別來看看 特殊性、繼承 和 層疊 這3種機制之間的關聯。

特殊性

在實際的應用中，我們都知道一個元素可以通過多種選擇器來進行選擇，如ID選擇器、類選擇器等等，具體可看CSS選擇器詳解。由不同選擇器組成的選擇元素的方式暫且稱之為規則吧。考慮以下3對規則，當然每對規則都選擇同樣的元素：

/* 規則1 */
h1 {
    color: red;
}
body h1 {
    color: purple;
}

/* 規則2 */
h2.grape {
    color: purple;
}
h2 {
    color: silver;
}

/* 規則3 */
html > body table tr[id="totals"] td ul > li {
    color: maroon;
}
li#answer {
    color: navy;
}

顯然，每一對規則中只有一個勝出，因為所匹配的元素只能是某一種顏色。那么怎么知道哪一個規則更強呢？

答案就在于每個選擇器的特殊性。通過計算選擇器的特殊性值，特殊性最高的規則將會勝出并被利用。 這里先預留一個問題，如果特殊性相等的兩個規則將如何確定應用？后面的層疊再介紹。

特殊性值

特殊性值表述為4個部分，如：0,0,0,0。一個選擇器的具體特殊性如下確定：

對于選擇器中給定的各個ID屬性值，加0,1,0,0。
對于選擇器中給定的各個類屬性值、屬性選擇或者偽類，加0,0,1,0。
對于選擇器中給定的各個元素和偽元素，加0,0,0,1。
結合符和通配選擇器 * 對特殊性沒有任何貢獻，加0,0,0,0。
內聯樣式特殊性為1,0,0,0，因此內聯聲明的特殊性最高。
標志為 !important 的聲明并沒有特殊的特殊性值，此時該聲明為重要聲明，超過所有非重要聲明。

通過以上的介紹，我們就可以計算出本節剛開始介紹的3組規則的特殊性值及被應用的規則：

/* 規則1 */
h1 { /* 0,0,0,1 */
    color: red;
}
body h1 { /* 0,0,0,2 （元素應用該規則） */
    color: purple;
}

/* 規則2 */
h2.grape { /* 0,0,1,1 （元素應用該規則） */
    color: purple;
}
h2 { /* 0,0,0,1 */
    color: silver;
}

/* 規則3 */
html > body table tr[id="totals"] td ul > li { /* 0,0,1,7 */
    color: maroon;
}
li#answer { /* 0,1,0,1 （元素應用該規則） */
    color: navy;
}

繼承

基于繼承機制，樣式不僅應用到指定的元素，還會應用到它的后代元素。下面的例子幫你了解繼承是如何工作的：

// CSS
ul {
    color: red;
}

// html
<div>
   <ul>
       <li>ul下的第一個li</li>
       <li>ul下的第二個li</li>
       <li>ul下的第三個li</li>
   </ul>
   <ol>
       <li>ol下的第一個li</li>
       <li>ol下的第二個li</li>
       <li>ol下的第三個li</li>
   </ol>
</div>

效果：

ul下的第一個li
ul下的第二個li
ul下的第三個li

ol下的第一個li
ol下的第二個li
ol下的第三個li

原理就是將聲明 color: red; 應用到 ul 元素時，這個元素會采用該聲明。然后將這個值再沿著文檔樹向下傳播到后代元素，并一直繼承，直到再沒有更多的后代元素繼承這個值為止。值絕對不會向上傳播，也就是說，元素不會把值向上傳遞到其祖先。

重要：繼承值是完全沒有特殊性的，因此特殊性值為0,0,0,0的特殊性也比其高，說明繼承值很容易被其他方式中的聲明取代。

層疊

在 特殊性 一節中我們預留了一個問題：如果特殊性相等的兩個規則將如何確定應用？假設有以下規則：

h1 {
    color: red;
}
h1 {
    color: blue;
}

哪一個會占上風？這兩個規則的特殊性都是0,0,0,1，所以它們的權重相等，都應當應用到元素，但這是不可能的，因為一個元素不可能既是紅色又是藍色（實際是藍色）。因此這里 層疊 就出場了，先看看層疊規則：

下面分別介紹規則中后三條規則。

按權重和來源排序

根據第二條規則，如果兩個樣式規則應用到同一個元素，而且其中一個規則有 !important 標志，這個重要規則將勝出。

p {
    color: gray !important;
}

<p style="color: black;">Well, <em>hello<em> there!</p>

效果：

Well, hello there!

另外，還要考慮規則的來源。來源權重由大到小的順序依次為：

讀者的重要聲明（有 !important）
創作人員的重要聲明（有 !important）
創作人員的正常聲明
讀者的正常聲明
用戶代理聲明

按特殊性排序

根據第三條規則，如果向一個元素應用多個彼此沖突的聲明，而且它們的權重相同，則按特殊性排序，最特殊的聲明最優先。

p#bright {
    color: silver;
}
p {
    color: black;
}

<p id="bright">Well, hello there!</p>

效果：

Well, hello there!

按順序排序

最后，根據第四條規則，如果兩個規則的權重、來源和特殊性完全相同，那么在樣式表中后出現的一個會勝出。

h1 {
    color: red;
}
h1 {
    color: blue;
}

<h1>我是藍色的標題1</h1>

效果：

我是藍色的標題1

鏈接樣式順序

好了，通過前面的介紹，我想大家應該基本了解CSS是如何確定應當向一個元素應用哪些值的。回到前言說到的鏈接樣式順序，為了正確的表現所設置的樣式，我們必須按一定的順序進行樣式設置。根據CSS2規范中的推薦順序，即 link-visited-hover-active，聲明樣式如下：

:link {
    color: blue;
}
:visited {
 color: purple;
}
:hover {
    color: red;
}
:active {
    color: orange;
}

根據之前的介紹，以上這些選擇器的特殊性都是一樣的：0,0,1,0。因此他們有相同的權重、來源和特殊性，因此與元素匹配的最后一個選擇器才會勝出。

正在 “點擊” 的 未訪問 鏈接可以與其中3個規則匹配 —— :link、:hover、:active，所以按照上面的聲明順序，:active將勝出，這可能就是我們所期望的。

假設我們忽略這種常用的順序，而是按字母順序排列鏈接樣式，聲明樣式如下:

    :active {
        color: orange;
    }
    :hover {
        color: red;
    }
    :link {
        color: blue;
    }
    :visited {
     color: purple;
    }

按照這種順序，任何鏈接都不會顯示 :hover 或者 :active，因為 :link 和 :visited 規則后出現。所有鏈接都必須要么是已訪問（:visited），要么是未訪問（:link），所以 :link 和 :visited 樣式總是會覆蓋 :hover 或者 :active。

當然鏈接樣式也可以根據自己的實際需要設定某一種順序，比如 link-hover-visited-active 這樣的一個順序，起到的效果是 只有未訪問的鏈接會有懸停樣式，已訪問的鏈接沒有懸停樣式。

最后，由于可以把偽類鏈接起來，所以可以不必擔心這些問題。以下規則可以任何順序列出，而不必擔心有什么負面影響：

:link {
    color: blue;
}
:visited {
 color: purple;
}
:link:hover {
    color: red;
}
:visited:hover {
    color: gray;
}
:link:active {
    color: orange;
}
:visited:active {
    color: silver;
}