今天要來舉例子了，廢話不多說直接開始。
要用到的 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