CSS偽類鏈接多用于向某些選擇器添加特殊效果，常見的CSS偽類鏈接為四類：未被訪問的鏈接、已被訪問的鏈接、鼠標(biāo)滑動(dòng)時(shí)的鏈接和點(diǎn)擊時(shí)的鏈接。今天筆者小丹要分享的CSS偽類鏈接鏈接文章主要就是針對(duì)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;}

    概述

    這里的每一個(gè)偽類的描述：

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

    :visited——選擇訪問鏈接。

    :hover——國(guó)家，當(dāng)用戶把鼠標(biāo)指針放在一個(gè)鏈接。

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

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

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

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

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

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

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

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

    一個(gè)例子，兩個(gè)偽類匹配在同一時(shí)間是當(dāng)點(diǎn)擊一個(gè)鏈接。開始的時(shí)候點(diǎn)擊事件短暫的聯(lián)系都匹配 :hover和 :active州因?yàn)槭髽?biāo)指針仍在鏈接，鏈接是被激活的。

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

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

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

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

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

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

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

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

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

    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)載請(qǐng)注明轉(zhuǎn)自：www.theclubhubb.com/news/n1544.htm，謝謝!珍惜別人的勞動(dòng)成果，就是在尊重自己!）