設置順序 a:link a:visited a:hover a:active
或 a:visited a:link a:hover a:active
其中 hover 和 active 的順序必須設置 link 和 visited 之後,active 必須設置在 hover 之後。
原因:
- 當鼠標移入時會同時觸發 link 和 hover 或同時觸發 visited 和 hover。如果沒有點擊過鏈接,則同時觸發 link 和 hover,因此要求 hover 設置在 link 之後,如果點擊過鏈接,則同時觸發 visited 和 hover,因此要求 hover 設置 在visited 之後。綜上:hover 必須設置在 link 和 visited 之後。
- 當點擊鏈接時同時觸發 hover 和 active,因此 active 樣式必須設置在 hover 之後纔可以生效。
- link 和 visited 樣式的順序設置則沒有要求,因爲默認顯示的是 link,訪問後 顯示的是 visited,並不會同時觸發 link 和 visited。
<style>
a:link {
color: seagreen;
}
a:visited {
color: firebrick;
}
a:hover {
color: skyblue;
}
a:active {
color: black;
}
</style>
<body>
<a href="#">this is a test</a>
</body>
重置瀏覽器對a鏈接訪問後顯示的樣式:在歷史記錄刪除該條訪問記錄即可。