[待整理]CSS定義了超連結A标記的樣式

學習超級連結A标記,問: 我已經使用CSS定義了超連結的樣式，但是浏覽時hover(滑鼠懸停)卻不起作用。為什麼會這樣？是浏覽器的問題嗎？ 答: 雖然你認為可能原因是浏覽器問題，但是更多的可能是你樣式定義時順序錯誤。為了保證能看到不同狀态下的連接配接樣式,正确的樣式順序應該是：

問:

我已經使用CSS定義了超連結的樣式，但是浏覽時hover(滑鼠懸停)卻不起作用。為什麼會這樣？是浏覽器的問題嗎？

答:

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

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

核心内容：

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

P.hithere {color: green;}

P {color: red;}

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

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

A:link {color: blue;}

A:active {color: red;}

A:hover {color: magenta;}

A:visited {color: purple;}

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

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

A:link

A:visited

A:hover

A:active

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

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

A:visited:hover {color: maroon;}

A:link:hover {color: magenta;}

A:hover:active {color: cyan;}

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;}

P {color: red;}

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

.hello {color: red;}

HTML BODY DIV UL LI OL LI UL LI OL LI UL LI OL LI (color: green;}

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

.hello {color: red;}

HTML BODY DIV UL LI OL LI UL LI OL LI UL LI OL LI (color: green;}

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

站長建議：反複練習specificity的權重值的計算，網站CSS的設定展現了你控制頁面的能力，在動态網站開發中，CSS的地位也是非常重要的，多看資料，多練習，多來腳本之家！如果你喜歡本站就代為宣傳吧！謝謝閱讀