超連接的四種狀態的應用詳細講解

雖然你認為可能原因是瀏覽器問題，但是更多的可能是你樣式定義時順序錯誤。為了保證能看到不同狀態下的連接樣式,正確的樣式順序應該是：

link - visited - hover - active 或LVHA (縮寫)。

核心內容：

每個選擇符selector都有一個specificity如果兩個selectors應用於同一個元素,具有較高specificity的選擇符將勝出，具有優先權。例如：

P.hithere {color: green;} /* specificity = 1,1 */P {color: red;} /* specificity = 1 */

任何設置了類class＝hithere的段落內容顯示為綠色而不是紅色。兩個selectors都設置了顏色，但是具有更高specificity的選擇符將勝出。

偽類如何影響specificity呢？它們具有完全相同的加權值，下列樣式具有相同的specificity加權值：

A:link {color: blue;} /* specificity = 1,1 */A:active {color: red;} /* specificity = 1,1 */A:hover {color: magenta;} /* specificity = 1,1 */A:visited {color: purple;} /* specificity = 1,1 */

這些都是用於超鏈接的樣式設置。大部分情況下需要同時設置其中的幾個樣式，例如,一個未被訪問的超鏈接在鼠標懸停和點擊時可設置鼠標懸停和鼠標激活兩種狀態下的不同樣式,由於上述三個規則都可應用於超鏈接,並且全部選擇符具備相同的specificity,那麼根據規則,最後一個樣式勝出。所以active 式樣永遠也不會顯示出來，因為它總是被hover 式樣覆蓋(即hover 優先)。現在再來分析一下已經被訪問過的超鏈接鼠標懸停是什麼效果，結果永遠是purple紫色的:( ，因為它的visited 式樣總是優先於其它的狀態樣式規則(包括active 和hover)而顯示。

這就是為什麼CSS1推薦樣式順序的原因：

A:linkA:visitedA:hoverA:active

實際上，開頭兩個樣式的順序可以調換，因為一個超鏈接不可能同時存在未訪問和已訪問兩種狀態。 ( :link意思是unvisited ；我不知道為什麼不這樣定義呢.)

CSS2現在允許偽類可以以聯合成組形式出現，例如：

A:visited:hover {color: maroon;} /* specificity = 2,1 */A:link:hover {color: magenta;} /* specificity = 2,1 */A:hover:active {color: cyan;} /* specificity = 2,1 */

They have the same specificity, but they apply to fundamentally different beasts, and so don't conflict. You can get hover-active combinations, for example.

如何理解本文當中所涉及到的specificity呢？ specificity可以理解未簡單地連在一起的號碼字符串,上面的一個例子：P.hithere {color: green;} /* specificity = 11 */P {color: red;} /* specificity = 1 */

這好像是一個基於十進制的簡單運算。然而計算specificity不能使用十進制算法，例如你把15種選擇符連在一起使用、它們具有的specificity加權值還是比簡單的class選擇符低。舉例：

.hello {color: red;} /* specificity = 10 */HTML BODY DIV UL LI OL LI UL LI OL LI UL LI OL LI (color: green;} /* specificity = 15 */

10 實際上是一個1後面接著零、不是十，我們可以使用十六進制描述前面的樣式規則的specificitiy，像下面：

.hello {color: red;} /* specificity = 10 */HTML BODY DIV UL LI OL LI UL LI OL LI UL LI OL LI (color: green;} /* specificity = F */

唯一的問題是如果你想為第二個樣式規則增加兩個或更多的選擇符時，那時你就可能得到一個17的specificity、會再一次混淆。事實上specificity可能是無窮大的，所以為了避免更多的混亂，建議使用逗號來分隔specificity的值。