鏈接僞類選擇器
僞類選擇器用於向某些選擇器添加特殊的效果,比如給鏈接添加特殊效果。
之前我們學過類選擇器,以點“.”開頭,爲了區分開來,僞類選擇器則是以冒號“:”開頭。
類選擇器: .demo { }
僞類選擇器: :link { }
鏈接僞類選擇器通常有以下四個:
- :link 未訪問的鏈接
- :visited 已訪問的鏈接
- :hover 鼠標移動到鏈接上面
- :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、選定鏈接時的狀態