a標籤的四個僞類

A標籤的css樣式

 

CSS爲一些特殊效果準備了特定的工具，咱們稱之爲「僞類」。其中有幾項是咱們常常用到的，下面咱們就詳細介紹一下常常用於定義連接樣式的四個僞類，它們分別是：

    :link
    :visited
    :hover
    :active

  由於咱們要定義連接樣式，因此其中必不可少的就是超級連接中的錨標籤--a，錨標籤和僞類連接起來書寫的方法就是定義連接樣式的基礎方法，它們的寫法以下：

    a:link，定義正常連接的樣式；
    a:visited，定義已訪問過連接的樣式；
    a:hover，定義鼠標懸浮在連接上時的樣式；
    a:active，定義鼠標點擊連接時的樣式。

  示例：

  a:link {
    color:#FF0000;
    text-decoration:underline;
    }
    a:visited {
    color:#00FF00;
    text-decoration:none;
    }
    a:hover {
    color:#000000;
    text-decoration:none;
    }
    a:active {
    color:#FFFFFF;
    text-decoration:none;
    }

  上面示例中定義的連接顏色是紅色，訪問事後的連接是綠色，鼠標懸浮在連接上時是黑色，點擊時的顏色是白色。

    若是正常連接和已訪問過的連接樣式相同，鼠標懸浮和點擊時的樣式相同，也能夠將它們合併起來定義：

  a:link,
    a:visited     {
    color:#FF0000;
    text-decoration:underline;
    }    
    a:hover,
    a:active    {
    color:#000000;
    text-decoration:none;
    }

連接定義的順序
  沒有規矩不成方圓，雖然連接定義寫好了，但它也是有規則的，若是這四項的書寫順序稍有差錯，連接的效果可能就沒有了，因此每次定義連接樣式時務必確認定義的順序，link--visited--hover-active，也就是咱們常說到的LoVe HAte原則（大寫字母就是它們的首字母）。

定義局部連接樣式
  在CSS中寫上a:link{}這樣的定義會使整個頁面的連接樣式改變，但有些局部連接須要特殊化，這個問題也不難解決，只要在連接樣式定義的前面加上指定的id或class就能夠了。

  示例：

  #sidebar a:link,
    #sidebar a:visiteid  {
    color:#FF0000;
    text-decoration:none;
    }
    #sidebar a:hover,
    #sidebar a:active  {
    color:#000000;
    text-decoration:underline;
    }

  調用方法：
  <div id="sidebar"><a href="aa.aspx" target="_blank">連接到aa頁面<a></div>

  class的定義方法和id相同，只要將#sidebar改成.sidebar就好了，還有一種方法是直接定義連接的樣式，那樣更直接，不過調用時比較麻煩，須要給每一個特定的連接加上定義的代碼。

  示例：   a.redlink a:link,    a.redlink a:visiteid  {    color:#FF0000;    text-decoration:none;    }    a.redlink a:hover,    a.redlink a:active  {    color:#000000;    text-decoration:underline;    background:#FFFFFF;    }