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