CSS 連結偽類選擇器順序原理

admin發表於2018-11-17
CSS

連結a是HTML中最重要的元素之一，通過它可以實現站內或者站際間頁面的跳轉。

為了更好的使用者體驗，連結具有四種狀態，根據不同的狀態設定不同的樣式。

四種狀態分別如下：

（1）.link

（2）.hover

（3）.active

（4）.visited

通過對應四種狀態的偽類選擇器，可以設定其狀態。

但偽類選擇器需要按照一定的順序設定，否則某些狀態效果不會生效。

選擇器正確排序是 :link > :visited > :hover > :actvie。

具體參閱CSS 設定連結樣式一章節。

只要記住上述順序，即便不知其中的原理，也可以很完美的工作。

還有不少小夥伴想了解其中的原理，下面詳細做一下介紹。

本質就是CSS選擇器優先順序問題，具體參閱CSS 選擇器優先順序規則一章節。

結合一段程式碼例項做一下介紹：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
a:link {
  text-decoration:none;
  color:red;
}
a:visited {
  text-decoration:none;
  color:blue;
}
a:hover {
  text-decoration:underline;
  color:green;
}
a:active {
  text-decoration:underline;
  color:deeppink;
}
</style>
</head>
<body>
<a href="#">本站url地址是www.softwhy.com</a>
</body>
</html>

程式碼分析如下：

（1）.四個偽類選擇器權重完全相同，所以需要通過它們的先後順序決定顯示哪種樣式。

（2）.:link要位於:visited的前面，如果順序顛倒，訪問後的樣式永遠得到不到顯示。

（3）.:hover要位於:active前面，:link後面，因為當滑鼠點選連結使其處於啟用狀態時，連結最少處於三種狀態:link、:hover和:active，如果:hover位於:active後面，那麼:active效果永遠得不到展現，如果位於:link的前面，那麼:hover的效果永遠得不到展現。同樣的道理，:hover也必須要位於:visited後面。

（4）.於是最終得出:link > :visited > :hover > :actvie這個順序。

最後總結如下：

實質就是確定一個恰當的優先順序關係，上面第三條分析看起來亂糟糟的。

其實可以從中總結出一個規律，link狀態不包含其他三種狀態，visited僅包含link狀態，hover可以包含link與visited兩種狀態，而active可以包含其他的三種狀態，規律看出來了嗎，共性越多的位置越靠後，這樣它的特性不會被覆蓋，別人的特性也不會被覆蓋。

相關文章