虛擬類別選擇器 ( 超連結 )

「超連結」虛擬類別選擇器主要是針對「a 元素」的進階選擇器，這種選擇器主要有 :link、:visited、:any-link、:target 四種，可以清楚設定「尚未點擊、點擊過或具有特殊指向性超連結」的樣式，這篇教學會介紹和「超連結」有關的虛擬類別選擇器。

「超連結」虛擬類別選擇器

下方列出和「超連結」有關的虛擬類別選擇器 ( 支援度 All 表示主流瀏覽器都支援 )：

通常超連結類型的虛擬類別選擇器，還會搭配「:hover」或「:active」操作行為虛擬類別選擇器使用。

:link

「:link」表示「沒有被點擊過超連結」的元素，嚴格來說只會選擇「具有 href 屬性並且沒有被點擊過的 a 元素」，下方的範例執行後，只有具有 href 屬性的 a 元素才會變成綠色，沒有 href 屬性的 a 元素則是紅色，而其他元素就算具有 href 元素仍然不會被 :link 影響。

注意，如果點擊過連結，瀏覽器就會自動套用已經點擊過的樣式。

線上展示：https://codepen.io/oxxo/pen/NWVNVGj

<!-- HTML 程式碼 -->
<a href="https://www.oxxostudio.tw">oxxo.studio</a>
<br/>
<a href="https://steam.oxxostudio.tw">STEAM 教育學習網</a>
<br/>
<a>我沒有 href</a>
<br/>
<span href="#">使用 span 完全沒作用</span>

<!-- CSS 程式碼 -->
<style>
  a {color: red;}       /* 所有 a 都是紅色 */
  :link {color: green;} /* 具有 href 且沒有被點擊過的 a 是綠色 */
</style>

因為直接使用「a 元素」選擇器等同時使用「a:link」和「a:visited」，且還沒有「只能點擊一次」限制，所以越來越多人會使用下方的寫法，也可以產生同樣的效果。

線上展示：https://codepen.io/oxxo/pen/abrNrZX

<!-- HTML 程式碼 -->
<a href="https://www.oxxostudio.tw">oxxo.studio</a>
<br/>
<a href="https://steam.oxxostudio.tw">STEAM 教育學習網</a>
<br/>
<a>我沒有 href</a>
<br/>
<span href="#">使用 span 完全沒作用</span>

<!-- CSS 程式碼 -->
<style>
  a {color: red;}           /* 所有 a 都是紅色 */
  a[href] {color: green;}   /* 具有 href 的 a 都是綠色 */
</style>

:visited

「:visited」表示「被點擊過的超連結」，嚴格來說只會選擇「具有 href 屬性並且被點擊過的 a 元素」，如果只是使用「a 元素」作為選擇器，其表現的方式等於同時使用「a:link」和「a:visited」，下方的範例執行後，兩組超連結的表現行為會一模一樣 ( 沒有點過是綠色，點過之後還是綠色 )。

線上展示：https://codepen.io/oxxo/pen/qBGZGme

<!-- HTML 程式碼 -->
<div class="g1">
  <a href="https://www.oxxostudio.tw">oxxo.studio</a>
  <br/>
  <a href="https://steam.oxxostudio.tw">STEAM 教育學習網</a>
</div>
<div class="g2">
  <a href="https://www.oxxostudio.tw">oxxo.studio</a>
  <br/>
  <a href="https://steam.oxxostudio.tw">STEAM 教育學習網</a>
</div>

<!-- CSS 程式碼 -->
<style>
  .g1 a {color: green;}           /* 所有超連結都是綠色，不論有沒有點過 */

  .g2 a {color: green;}           /* 所有超連結都是綠色 */
  .g2 a:visited {color: red;}     /* 點擊過的超連結都是紅色 */
</style>

因為受限於瀏覽器隱私設定，:visited 具有下列相關限制：

• 只能使用部分屬性：color、background-color、border-color、border-bottom-color、border-left-color、border-right-color、border-top-color、column-rule-color、outline-color、text-decoration-color、text-emphasis-color。
• 只支援部分 SVG 屬性：fill、stroke。
• 不能使用半透明：只能完全透明或完全不透明。
• 只能「覆寫」樣式屬性：需要先具有該樣式屬性，才能覆寫和套用該樣式屬性。
• 無法使用 JavaScript 取得目前 :visited 的設定值。

舉例來說，上方這組超連結因為 a 沒有設定 background-color，所以就算 a:visited 有設定，也不會變色，但下方的超連結因為 a 裡面有 background-color，a:visited 就能用覆寫的方式變色，但因為不支援 font-size 屬性，所以字體會保持原本的 20px。

線上展示：https://codepen.io/oxxo/pen/abrNrVr

<!-- HTML 程式碼 -->
<div class="g1">
  <a href="https://www.oxxostudio.tw">oxxo.studio</a>
  <br/>
  <a href="https://steam.oxxostudio.tw">STEAM 教育學習網</a>
</div>
<div class="g2">
  <a href="https://www.oxxostudio.tw">oxxo.studio</a>
  <br/>
  <a href="https://steam.oxxostudio.tw">STEAM 教育學習網</a>
</div>

<!-- CSS 程式碼 -->
<style>
  .g1 a {color: green;}                       /* 所有超連結都是綠色 */
  .g1 a:visited {background-color: orange;}   /* 點擊過的超連結會有橘色背景 ( 不會執行 ) */

  .g2 a {
    font-size:20px;            /* 所有超連結文字大小都是 20px */
    color: green;              /* 所有超連結都是綠色 */
    background-color: white;   /* 所有超連結背景都是白色 */
  }           
  .g2 a:visited {
    font-size:100px;           /* 所有超連結文字大小都是 100px */
    color: red;                /* 所有超連結都是紅色 */
    background-color: orange;  /* 所有超連結背景都是橘色 */
  }   
</style>

:any-link

「:any-link」表示「超連結元素」，換句話說只會選擇「具有 href 屬性的 a 元素」，其表現的方式等於使用「a 元素」作為選擇器，也等於同時使用「a:link」和「a:visited」，下方的範例執行後，超連結不論有沒有點擊過都會是綠色，但不具有 href 屬性的 a 元素則是紅色，具有 href 屬性的 span 元素則是黑色。

線上展示：https://codepen.io/oxxo/pen/yLWOWER

<!-- HTML 程式碼 -->
<a href="https://www.oxxostudio.tw">oxxo.studio</a>
<br/>
<a href="https://steam.oxxostudio.tw">STEAM 教育學習網</a>
<br/>
<a>我沒有 href</a>
<br/>
<span href="#">使用 span 完全沒作用</span>

<!-- CSS 程式碼 -->
<style>
  a {color: red;}           /* 所有的 a 都是紅色 */
  :any-link {color: green;} /* 超連結元素為綠色 */
</style>

:target

「:target」表示「錨點目標元素」，意思是當「具有 ID 錨點的網址所對應的 ID 元素」，舉例來說，如果網址有方有「#apple」，則 :target 選擇器就會自動選取 ID 為 apple 的元素，將該元素套用對應的樣式。

線上展示 ( 自行更換 apple 測試 )：https://output.jsbin.com/yaguwutazi/2#apple

<!-- HTML 程式碼 -->
<h2 id="oxxo">oxxo</h2>
<h2 id="apple">apple</h2>
<h2 id="banana">banana</h2>
<h2 id="orange">orange</h2>

<!-- CSS 程式碼 -->
<style>
  :target {color: red;}
</style>

小結

「超連結」的虛擬類別選擇器主要都是針對超連結使用，也常搭配「:hover」或「:active」操作行為虛擬類別選擇器，讓超連結更具有互動和反饋，是使用頻率相當高的選擇器喔。

• W3C 官方參考：https://www.w3.org/TR/2018/SPSD-html5-20180327/disabled-elements.html
• MDN 文件參考：https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～