CSS偽類鏈接多用于向某些選擇器添加特殊效果，常見的CSS偽類鏈接為四類：未被訪問的鏈接、已被訪問的鏈接、鼠標(biāo)滑動時的鏈接和點擊時的鏈接。今天筆者小丹要分享的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——國家，當(dāng)用戶把鼠標(biāo)指針放在一個鏈接。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    結(jié)果

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