CSS偽類鏈接多用于向某些選擇器添加特殊效果，常見的CSS偽類鏈接為四類：未被訪問的鏈接、已被訪問的鏈接、鼠標滑動時的鏈接和點擊時的鏈接。今天筆者小丹要分享的CSS偽類鏈接鏈接文章主要就是針對CSS偽類常用樣式的超鏈接 :link，:visited，:hover，:active，:focus。

    下面我們具體舉例說明CSS偽類鏈接。例子如下：

    /* Default */
    a { color: blue;}
    /* Unvisited links */
    a:link { color: blue;}
    /* Visited links */
    a:visited { color: purple;}
    /* Hover state */
    a:hover { color: red; }
    /* Focused state */
    a:focus { color: orange;}
    /* Activated state */
    a:active { color: green;}

    概述

    這里的每一個偽類的描述：

    :link——選擇未瀏覽鏈接。

    :visited——選擇訪問鏈接。

    :hover——國家，當用戶把鼠標指針放在一個鏈接。

    :active——國家，當用戶單擊一個鏈接。之間這是短暫的瞬間點擊鏈接成為集中或者點擊之間的時刻，然后將另一個web頁面。因為這種狀態(tài)通常持續(xù)很短的時間，你可以看到這個狀態(tài)更容易當你click-and-mouse-down鏈接不釋放鼠標按鈕。

    :focus——國家發(fā)生在用戶關注的鏈接。這種狀態(tài)可以看到選項卡，一個鏈接時或當你點擊一個鏈接。

    從技術上講五個最常用的偽類的鏈接，只有兩個- :link和 :visited。實際上是專門為HTML鏈接的鏈接偽類(< >)元素。其他三個:hover， :active，:focus，被稱為動態(tài)偽類和其他可用于HTML元素。

    結合偽類，更大的CSS特性，您可以使用偽類的組合。

    例如，你可能希望有一個不同的外觀當用戶將鼠標懸停于一個訪問鏈接和一個未瀏覽的鏈接。

    a:link { color: blue;}
    a:visited { color: purple;}
    a:link:hover { color: green;}
    a:visited:hover { color: red;}

    在前面的例子中，當用戶鼠標經過一個既鏈接錨文本將成為綠色。但如果是一個訪問鏈接，錨文本將成為紅色。

    偽類的順序，因為CSS特異性鏈接可以同時匹配多個偽類。這就是為什么樣式表中的樣式規(guī)則的順序是至關重要的。

    一個例子，兩個偽類匹配在同一時間是當點擊一個鏈接。開始的時候點擊事件短暫的聯系都匹配 :hover和 :active州因為鼠標指針仍在鏈接，鏈接是被激活的。

    我們知道如果兩個選擇器是平等的特異性，默認情況下,選擇器在樣式表中獲勝。因此如果 :active樣式規(guī)則之上 :hover樣式規(guī)則，用戶永遠不會看到 :active樣式規(guī)則應用，因為 :hover樣式規(guī)則取代它。

    所有鏈接偽類樣式規(guī)則，以便成功地呈現這是建議的順序:

    a { }
    a:link { }
    a:visited { }
    a:hover { }
    a:focus { }
    a:active { }

    不區(qū)分大小寫。W3C的偽類規(guī)格允許任何類型的套管的風格。這意味著寫偽類的名字全部大寫、小寫字母或任何其他套管工作風格。然而，主流的最佳實踐是在小寫字母寫偽類的名字。

    所有的這些 :link偽類變化將彼此工作和技術上是等價的：

    a:link { }
    a:LINK { }
    a:LiNk { }
    a:lInK { }
    偽類的名字前后間距字符，不能有任何間距字符冒號(之前和/或之后:前)偽類的名字。

    例如，編寫樣式規(guī)則這樣不會正確地呈現在瀏覽器：

    在現代瀏覽器鏈接偽類。在現代web瀏覽器， :link和 :visited將不同于其他偽類為了保護客人的隱私的瀏覽歷史?，F代瀏覽器現在限制CSS屬性，將呈現樣式規(guī)則中涉及 :link和 :visited偽類。簡而言之，樣式規(guī)則 :link和 :visited不能除了顏色不同的屬性。例如，你不能分配他們不同 background-image或者給他們不同的值 display值。

    在現代瀏覽器，下面的例子將并不是你所期望的那樣。訪問鏈接不會呈現全大寫，他們會在所有的小寫就像未瀏覽鏈接。

    HTML
   
    <a href="#unvisited">Unvisited LINK</a>
    <a href="#visited">Visited LINK</a>

    CSS
    /* Unvisited links are told to render in all-lowercase */
    a:link { text-transform: lowercase;}
    /* Visited links are instructed to render in all-caps */
    a:visited { text-transform: uppercase;}

    結果

 (轉載請注明轉自：www.flw114.cn/news/n1544.htm，謝謝!珍惜別人的勞動成果，就是在尊重自己!）