iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 4
0
Modern Web

喪屍黑白切系列 第 4

Day 04 | 順序有那麼重要嗎?Part 2

今天要來舉例子了,廢話不多說直接開始。
要用到的 HTML 只有這行

<a href="#">Zombie@Dump</a>

a 初始設定

a {
 color: black;
}

:link vs :visited

:link 是指含有 href 的元素,以前的支援度不佳,所以
到現在通常會被忽略,等同於直接使用a{...},後面的例子我就不會加上:link
以上資訊來自:
常用於超連結的動態僞類選取器 - 讓你網頁互動變豐富

a {
 color: black;
}

a:visited {
  color: red;
}

連結被點擊後,a 會變成紅色

如果反過來放的話,連結不管怎麼點,都只會保持黑色。

:visited vs :focus

a:focus {
  color: green;
}

a:visited {
  color: red;
}


由此圖片可以看出來,a:focus 的時候,只有出現外圍的藍框,文字顏色並沒有改變,
如果變動一下順序的話,就沒有問題了

a:visited {
  color: red;
}

a:focus {
  color: green;
}

:focus vs :hover

a:focus {
  color: green;
}

a:hover{
  color: orange;  
}


可以看到這樣是兩者都有作用的,
如果反過來的話就會

:hover vs :active

a:active {
  color: pink;
}

a:hover {
  color: orange;  
}

:active 明顯沒有作用到,所以 :active 要擺在 :hover 的後面,
就會像這樣

提供 codepen 玩玩看。

由這些例子看下來,會發現順序真的是非常重要,不然就是白做設定了,
以上就是今天的內容,如果有講不對的地方再請各位留言讓我知道,謝謝。
明天要來講::before, ::after


上一篇
Day 03 | 順序有那麼重要嗎?Part 1 - :link, :visited, :focus, :hover, :active
下一篇
Day 05 | 以前要的不是這種以後?! - ::before, ::after
系列文
喪屍黑白切30

尚未有邦友留言

立即登入留言