0 與 1 的邂逅 @joaoko

標題取的有點怪，不過我想不出更好的 XD
在 CSS 中，要定義連結的樣式我們通常都會用被稱為”偽類 (pseudo-classes)”像下面的這種東西：

a:link{…}
a:visited{…}
a:active{…}
a:hover{…}

但我是到今天才發現，如果改變順序的話，所呈現的效果也會跟著不一樣。
發現的原因是之前側邊欄裡的連結樣式一直怪怪的，明明我是設定當滑鼠停在連結上時，背景是綠色而字是白色的，可實際效果卻是背景跟字都是白色的，結果就一整塊都是白色的。
分析了一下之後我發現，沒被點過的連結並不會出現上述的情形。
後來我就明白了，原來是樣式的順序所造成的。
修改前的順序是：
a:link{color: #fff;}
a:hover{color: #8cbd2e; background: #fff;}
a:visited{color: #fff}

順序修改一下就正常了:
a:link{color: #fff;}
a:visited{color: #fff;}
a:hover{color: #8cbd2e; background: #fff;}

解說：當有點過的連結碰上修改前的順序時，連結符合 a:hover 的條件的話字是綠色而背景是白色的，然後瀏覽器會再繼續往下讀 CSS，剛好又符合 a:visited 的條件，所以就變成字跟背景都變成白色的。

所以以後再寫連結的樣式時就要特別注意了。