調整CSS類型的順序改變連結翻滾效果_CSS/HTML

你也許已經意識到，你可以透過指定每一鍵接的不同風格以建立CSS翻滾效果，這些連結包括普通的連結link (normal), 訪問，翻轉，以及啟動。而且，你可能也知道CSS類型的順序可以產生效果上的差別，CSS程式碼後順序的風格將會取代針對於相同元素的前順序的風格。建立翻滾效果的類型順序顯得相當重要。
    現在讓我們看看如何安排連結狀態的類型在不產生衝突的情況下支援正常的翻滾效果，並且如何重新安排這些類型順序以獲得不同的翻滾效果。

    連結狀態

    典型的CSS翻滾效果取決於超連結中四個狀態之一的獨立類型。可以建立附帶CSS預先類別的＜A＞（超連結）類型以指定連結狀態：

a:link－常規，非存取超連結

a:visited——訪問超連結

a:hover——訪客操作滑鼠通過時的連結

a:active——點選連結

    為了能夠使典型的CSS翻滾效果正常運作，CSS程式碼中的CSS類型順序顯得非常重要，無論它是一個外部類型表格或是嵌入在HIML頁標題欄中的類型規則。

    a:link類型出現的時間為最早，因為它可套用於所有的連結。 a:visited類型排第二，它將取代任何連結的a:link格式。 (如果a:link類型緊接著的是a:visited，a:link可能會取代a:visited類型。)其次是a:hover類型，此類型只應用於訪問滑鼠下的連結。最後是a:active，所以，當連結被點擊時，它可以取代所有其它的類型。

a:link {

    color: #0000FF;

    text-decoration: underline;

    font-weight: normal;

    font-style: normal;

}

a:visited {

    color: #3399FF;

    text-decoration: underline;

    background-color: #FFFFFF;

    font-weight: normal;

    font-style: italic;

}

a:hover {

    color: #0000FF;

    text-decoration: underline;

    background-color: #FFFF00;

    font-weight: bold;

    font-style: normal;

}

a:active {

    color: #FF0000;

    text-decoration: none;

    background-color: #CCCCCC;

    font-weight: bold;

    font-style: normal;

}

    在CSS程式碼中的類型順序決定了每種類型如何取代其它的類型，即更多的類型可以應用到特定的元素。正常情況下，a:hover類型處於a:link和a:visited類型之後，所以hover狀態的類型可以應用於常規和訪問的連結。但是，它也並非必須遵循這一方式，你可以改變類型順序來實現不同的效果。

    假設你想在非訪問鏈接中使用翻滾效果，但不想影響到其它訪問鏈接，你或許想到通過代碼來處理這種外形上改變，然而你所要做的是重新組織CSS代碼。

    從訪問連結中移除翻滾效果，可以透過簡單地移除a:visited類型。

    注意，a:visited類型中包含指定所有與a:hover相同屬性的規則，否則，當訪問者的滑鼠通過一個訪問鏈接時，沒有被a:visited類型取代的任何a:hover類型屬性將會繼續再現。

資料來源：網頁教學網