CSS基礎(chǔ)教程之偽類選擇器
CSS偽類選擇器：給超鏈接加的樣式(鏈接的不同狀態(tài)加樣式)
一個(gè)超鏈接，有四個(gè)狀態(tài)：
正常狀態(tài)(:link)：鼠標(biāo)沒放上之前鏈接的樣式。
放上狀態(tài)(:hover)：鼠標(biāo)放到鏈接上時(shí)的樣式。
激活狀態(tài)(:active)：按住鼠標(biāo)左鍵不松開的樣式，這個(gè)狀態(tài)特殊短暫。
訪問(wèn)過(guò)的狀態(tài)(:visited)：按下鼠標(biāo)左鍵，并彈起，這時(shí)的樣式效果。
在平常工作中，會(huì)使用以下寫法，來(lái)給鏈接加不同的樣式：
a:link, a:visited{ color:#444; text-decoration:none; } ?//將“正常狀態(tài)”和“訪問(wèn)過(guò)的狀態(tài)”合二為一。
a:hover{ color:#990000; text-decoration:underline; } ?//“鼠標(biāo)放上”單做一種效果
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
</head>
<style type="text/css">
.box {
height:30px;
border:1px solid red;
padding:10px;
}
.box a:link,.box a:visited{color:#66ff88;text-decoration:none; }/*將“正常狀態(tài)”和“訪問(wèn)過(guò)的狀態(tài)”合二為一。*/
.box a:hover{color:#ff0000;text-decoration:underline;}/*“鼠標(biāo)放上”單做一種效果*/
</style>
<body>
<div class="box">
<a href="#">歡迎來(lái)到php.cn</a>|
<a href="#">首頁(yè)</a>|
<a href="#">課程</a>|
<a href="#">問(wèn)答</a>|
<a href="#">手記</a>
</div>
</body>
</html>
