虚拟类别选择器 ( 超链接 )

“超链接”虚拟类别选择器主要是针对“a 元素”的进阶选择器，这种选择器主要有 :link、:visited、:any-link、:target 四种，可以清楚设定“尚未点击、点击过或具有特殊指向性超链接”的样式，这篇教学会介绍和“超链接”有关的虚拟类别选择器。

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

“超链接”虚拟类别选择器

下方列出和“超链接”有关的虚拟类别选择器 ( 支援度 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

意见反馈