CSS3實例教程:hover、active和:focus偽選擇器

2024-07-11 09:01:46

字體：大中小

來源：轉載

供稿：網友

武林網(www.survivalescaperooms.com)文章簡介：CSS3實例教程:hover、active和:focus偽選擇器。

CSS3的偽類選擇器就是多，今天我們來學習新的偽類選擇器——UL狀態偽類選擇器。這些選擇器都有一個共同的特征名那就是定義的樣式只有當元素處于某種狀態下時才起作用，在默認狀態下無效。

　　今天我們先來接觸:hover、active和:focus這三種狀態偽類選擇器。

:hover選擇器、:active選擇器和:focus選擇器
　　:hover選擇器：當鼠標懸停在所指定的元素上時所使用的樣式；
　　:active選擇器：當所指定的元素處于激活狀態（鼠標在元素上按下還沒有松開）時所使用的樣式；
　　:focus選擇器：當元素獲得光標焦點時使用的樣式，主要用在文本框輸入文字時使用；
　　【注】下方案例運行效果，之所以點擊后立即變為綠色是因為active觸發的同時focus也觸發了，所以active定義的樣式看似無效，大家可以先把focus定義的樣式注釋掉運行；

<!DOCTYPE HTML>

<html>

    <head>

        <meta charset="gb2312">

        <title>CSS3實例教程:hover、active和:focus偽選擇器——網頁教學網webjx.com</title>

        <style type="text/css">

　　　　*{margin:0; padding:0;}

　　　　body{margin-bottom:20px; font-family:"Microsoft yahei"; font-size:14px;}

　　　　ul{margin:50px auto; width:260px; height:100px; list-style:none;}

　　　　　　ul li{margin-bottom:10px; overflow:hidden;}

　　　　　　　　label,input{display:inline; float:left;}

　　　　　　　　label{padding-right:8px; width:50px; height:27px; line-height:27px; text-align:right;}

　　　　　　　　input{width:200px; height:25px; border:1px #eee solid; border-top:1px #d1d1d1 solid; outline:none;}

　　　　　　　　input:hover{background:#eff7ff;}

　　　　　　　　input:active{background:#ffd;}

　　　　　　　　input:focus{background:#f2fddb;}

        </style>

    </head>


    <body>

    　　<ul>

            　<li>

            　　　<label for="userName">姓名:</label>

                　　<input id="userName" type="text"/>

            　</li>

            　<li>

            　　　<label for="userPwd">密碼:</label>

                　　<input id="userPwd" type="password"/>

            　</li>

        　</ul>

    </body>

</html>