3.15 連結樣式

「連結」是以 <a href="#">這是連結的文字</a> 這樣的形式出現於網頁之中，其中有幾種基本的型態：

• 未點擊過的連結(:link 這是預設)

• 已點擊過的連結(:visited)

• 滑鼠移過去之後，文字的顏色(:hover)

• 滑鼠按壓下去不放開，文字的顏色(:active)

偽類別 (Pseudo-class)

針對連結專有的偽類別，即這四種：:link、:visited、:hover、:active。

主要是瀏覽器已判斷到該連結有存在瀏覽器的歷史記錄，有存在的話，就顯示 :visited 的相關樣式，如果不存在，預設就是 :link 相關樣式。

留意：:hover 需放在 :link 和 :visited 後面才會有效。

範例

HTML：

<a href="https://www.indiegogo.com/projects/s1-circle-most-powerful-compact-bluetooth-speaker#/" class="link_style" target="_blank">這是連結文字</a>

CSS：

/* 未點擊過的連結，實事上，等同於不用寫 :link */
a.link_style:link{
  color: black;
}

/* 已點擊過的連結 */
a.link_style:visited{
  color: red;
}

/* 滑鼠移過去之後，需放在 :link 及 :visited 後面，才會有效 */
a.link_style:hover{
  color: green;
}

/* 滑鼠按壓下去後，還沒放開 */
a.link_style:active{
  color: blue;
}

例：