CSS基礎教學之偽類選擇器LOGIN

CSS基礎教學之偽類選擇器

CSS偽類選擇器:為超連結加的樣式(連結的不同狀態加樣式)

一個超鏈接,有四個狀態:

正常狀態(:link):滑鼠沒放上先前連結的樣式。

放上狀態(:hover):滑鼠放到連結上時的樣式。

啟動狀態(:active):按住滑鼠左鍵不放開的樣式,這個狀態特別短暫。

訪問過的狀態(:visited):按下滑鼠左鍵,並彈起,這時的樣式效果。

在平常工作中,會使用以下寫法,來為連結加上不同的樣式:

a:link, a:visited{ color:#444; text-decoration: none; }  //將「正常狀態」和「造訪過的狀態」合而為一。

a:hover{ color:#990000; text-decoration:underline; }  //「滑鼠放上」單做一個效果

<!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; }/*将“正常状态”和“访问过的状态”合二为一。*/
        .box a:hover{color:#ff0000;text-decoration:underline;}/*“鼠标放上”单做一种效果*/
       
    </style>
    <body>
        <div class="box">
            <a href="#">欢迎来到php.cn</a>|
            <a href="#">首页</a>|
            <a href="#">课程</a>|
            <a href="#">问答</a>|
            <a href="#">手记</a>
        </div>
    </body>
</html>



#下一節
<!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; }/*将“正常状态”和“访问过的状态”合二为一。*/ .box a:hover{color:#ff0000;text-decoration:underline;}/*“鼠标放上”单做一种效果*/ </style> <body> <div class="box"> <a href="#">欢迎来到php.cn</a>| <a href="#">首页</a>| <a href="#">课程</a>| <a href="#">问答</a>| <a href="#">手记</a> </div> </body> </html>
章節課件