標題取的有點怪,不過我想不出更好的 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 的條件,所以就變成字跟背景都變成白色的。
所以以後再寫連結的樣式時就要特別注意了。
原來如此
看完我之前無意中修正的一些問題
大概是因為我改css的時候無意中順便調了順序吧…
謝謝分享!
最近剛好在改版,原來這也有關聯哪!