【溫故知新】CSS學習筆記(鏈接僞類選擇器)

鏈接僞類選擇器

 

僞類選擇器用於向某些選擇器添加特殊的效果,比如給鏈接添加特殊效果。

之前我們學過類選擇器,以點“.”開頭,爲了區分開來,僞類選擇器則是以冒號“:”開頭。

類選擇器:   .demo { }

僞類選擇器: :link { }

 

鏈接僞類選擇器通常有以下四個:

  1. :link      未訪問的鏈接
  2. :visited   已訪問的鏈接
  3. :hover    鼠標移動到鏈接上面
  4. :active    選定的鏈接

 

注意,如果你想寫全,上面四個的順序是不能顛倒的。

【例子】

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>僞類選擇器</title>
	<style>
	a:link{ /*未訪問的鏈接*/
		color: #3c3c3c;
		font-size: 25px;
		text-decoration:none;
		font-weight: 700;
	}
	a:visited{ /*已訪問過的鏈接*/
		color: orange;
	}
	a:hover{ /*鼠標經過鏈接時候的狀態*/
		color: #f10215;
	}
	a:active{ /*鼠標按下時候的狀態*/
		color:green;
	}
	</style>
</head>
<body>
	<a href="#">秒殺點擊這裏</a>
</body>
</html>

1、未訪問的鏈接

2、已訪問的鏈接

3、鼠標移動到鏈接上面的狀態

4、選定鏈接時的狀態

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