iT邦幫忙

2021 iThome 鐵人賽

DAY 2
0
Modern Web

網頁前後端寶石庫-礦坑補完計畫系列 第 2

Day 02 HTML/CSS 點擊超連結會經歷的偽類選取器(Pseudo-classes)

根據 MDN,目前 CSS 的偽類選取器有以下這些:

https://ithelp.ithome.com.tw/upload/images/20210916/20139241yEyeLKgGVy.png

今天要介紹到的是關於點擊超連結後會經歷的五種偽類選取器(紅框內):

在 style 裡面可以用 a:link、a:hover、a:active、a:focus、a:visited 改變超連結的樣式。

  1. :link
    還沒點擊超連結所呈現的樣子。
  2. :hover
    鼠標移到超連結後還沒點擊所呈現的樣子。
  3. :active
    點擊超連結時所呈現的樣子。
  4. :focus
    取得焦點時所呈現的樣子。
  5. :visited
    點完超連結後所呈現的樣子。

而 CSS 樣式後面寫的會蓋掉前面的關係,需按照以下順序由上而下來寫,超連結才不會壞掉:
:link > :visited > :focus > :hover > :active

為什麼要按照這樣的順序呢?

因為鼠標在外時,要能顯示 :link 跟 :visited 的狀態。
其中 :visited 要能蓋過 :link 才能顯示出被點擊後的外觀。
所以 :link 要放在 :visited 前面,其他三個則要放在他們後面才不會被蓋住。
再來鼠標移過去點擊後拉開放掉會呈現 :focus,此時鼠標移過去時應該要能呈現 :hover,
所以 :focus 要放在 :hover 前面。
接著同為鼠標移過去的狀態,:hover 會先出來,:active 需要比 :hover 優先被執行,
所以 :hover 要放在 :active 前面。

範例:

  • 這是原本超連結的顏色(:link):
    https://ithelp.ithome.com.tw/upload/images/20210916/20139241F3u23EOW7f.png
  • 這是鼠標移到超連結的顏色(:hover):
    https://ithelp.ithome.com.tw/upload/images/20210916/20139241U92NZeEoLg.png
  • 這是取得焦點的顏色(:link + :focus):
    (做法是按下鼠標後不要在超連結上放開鼠標,要在其他空白處放開,就可以呈現 focus 的樣式。)
    https://ithelp.ithome.com.tw/upload/images/20210916/201392411JxMCO3PXE.png
  • 這是點擊超連結的顏色(:active + :focus):
    https://ithelp.ithome.com.tw/upload/images/20210916/20139241eaKFIVMwwV.png
  • 這是點完超連結的顏色(:visited):
    https://ithelp.ithome.com.tw/upload/images/20210916/20139241OmPzc6hSMF.png
<body>
  <a href="#">我是超連結</a>
</body>
<style>
  a:link {
    color: orange;
  }
  a:visited {
    color: indigo;
  }
  a:focus {
    background: grey;
  }
  a:hover {
    color: black;
  }
  a:active {
    color: green;
  }
</style>

參考資料:
[1]MDN:虛擬類別(pseudo-class)
[2]常用於超連結的動態僞類選取器 - 讓你網頁互動變豐富


上一篇
Day 01 阿修補坑中
下一篇
Day 03 HTML/CSS 使用 tailwindcss 遇到的小問題
系列文
網頁前後端寶石庫-礦坑補完計畫30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言