應用於連結的偽類順序所造成的影響

標題取的有點怪,不過我想不出更好的 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 的條件,所以就變成字跟背景都變成白色的。

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

2 thoughts on “應用於連結的偽類順序所造成的影響

  1. 原來如此

    看完我之前無意中修正的一些問題
    大概是因為我改css的時候無意中順便調了順序吧…

    謝謝分享!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *