霍者博客

CSS3选择器-状态性伪类选择器(一) :hover选择器 :active选择器 :focus选择器

CSS3的伪类选择器就是多,今天我们来学习新的伪类选择器——状态伪类选择器。这些选择器都有一个共同的特征名那就是定义的样式只有当元素处于某种状态下时才起作用,在默认状态下无效。

今天我们先来接触: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选择器 | 霍者博客(www.huozheweb.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;}
ul li label{padding-right:8px; width:50px; height:27px; line-height:27px; text-align:right;}
ul li input{width:200px; height:25px; border:1px #eee solid; border-top:1px #d1d1d1 solid; outline:none;}
ul li input:hover{background:#eff7ff;}
ul li input:active{background:#ffd;}
ul li 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>

原创文章请注明转载自霍者博客本文地址:http://www.huozheweb.com/post/485.html,标题:CSS3选择器-状态性伪类选择器(一) :hover选择器 :active选择器 :focus选择器

【我来说两句】
分享到:

评论 0

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。