CSS專題（五）：詳說連結的偽類A hover等

一 背景

　　關於偽類，或連結偽類，可能我們都知道a標籤的一些寫法，a:hover,a:focus,a:visited,然後寫下不同的樣式，表示連結在各種狀態下的表現。我們可能也遇到過input:focus的寫法，表示輸入框遇到了焦點的樣式。對於偽類，多數人一知半解，或僅僅記住lvoe等口訣。更讓人不清晰的是各個偽類的具體含義。下面較為詳細的解說。

二 連結偽類

　　有些偽類是專為連結而生的，而且這個連結必須含有href屬性，以示其為一個"連結"。在html中，連結就是a標籤。有以下兩個偽類只作用於連結：

1. :link，表示一個未訪問過的連結

2. :visited 表示已經訪問過的連結，表示滑鼠已經點擊過，或者用鍵盤觸發過。瀏覽器硬碟會記住使用者對該連結的點擊情況，所以，如果上次點擊了某個連結，再次開啟，還是visited的樣式。

　　其中，瀏覽器或預設連結的樣式。但通常我們會覆寫。如下：

a{color：gray}a:link{color:blue}a:visited{color:red}

看的出來，此時，a{color:gray}已經沒有用了，被a:link{color:blue}覆蓋了，所以a標籤的文字顏色是藍色。

三 動態偽類

　　CSS2.1增加了三個動態偽類。常常用來設定連結的樣式，其實，這三個偽類可以應用在很多元素上。如下：

1. :focus，表示該元素獲得了焦點時的樣式，一般，通過鍵盤的Tab鍵獲得焦點。如果通過滑鼠點擊，可能看不到a標籤的focus樣式，

2. :hover，表示滑鼠移至上方在元素上的樣式。在a標籤中非常常用。

3. :active，表示觸發（滑鼠或鍵盤）之前，點擊之後，滑鼠未鬆開時的樣式。該狀態需仔細測試，慢慢琢磨後才能體會其妙處。

四 總結

　　以上，對a標籤的連結，通常要注意偽類的順序。一般為：link,visited,hover,active,現在更流行：link,visited,focus,hover,active。對於一般的元素，只能使用focus,hover,active等，最常用的是輸入框獲得焦點後的樣式：

input :focus{    border:1px #F8A746 solid;    outline:1px #F6E0C5 solid;}

五 樣本

　　關於偽類的完整樣本：www.zangb.com/html/demo/css/css_hover.html

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　方勁松 南京焦點科技 寫於鼓樓清涼山 2012-8-23