a 鏈接設置順序及原理

設置順序 a:link a:visited a:hover a:active

a:visited a:link a:hover a:active

其中 hover 和 active 的順序必須設置 link 和 visited 之後,active 必須設置在 hover 之後。

原因:

  1. 當鼠標移入時會同時觸發 link 和 hover 或同時觸發 visited 和 hover。如果沒有點擊過鏈接,則同時觸發 link 和 hover,因此要求 hover 設置在 link 之後,如果點擊過鏈接,則同時觸發 visited 和 hover,因此要求 hover 設置 在visited 之後。綜上:hover 必須設置在 link 和 visited 之後。
  2. 當點擊鏈接時同時觸發 hover 和 active,因此 active 樣式必須設置在 hover 之後纔可以生效。
  3. 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鏈接訪問後顯示的樣式:在歷史記錄刪除該條訪問記錄即可。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章