css&html伪类选择器(27)_html伪类选择器例子-CSDN博客

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
			<style type="text/css">
				/*
				 * 伪类专门用来表示元素的一种特殊的状态
				 * 比如：访问过的链接，比如普通的超链接，比如获取焦点的文本框
				 * 当我们需要为处理这些特殊状态的元素设置样式时，就可以使用伪类
				 */
				/*
				 * 为访问过的链接设置一个颜色为绿色
				 * 	：link
				 * 		-表示普通的链接（没访问过的链接）
				 */
				a:link{
					color: yellowgreen;
				}
				/*
				 * 为访问过的链接设置一个颜色为红色
				 * 	：visited
				 * 			-表示访问过的链接
				 * 
				 * 浏览器时通过历史记录判断一个链接是否被访问过
				 * 
				 * 由于涉及到用户的隐私问题，所以使用visited的类只能设置字体的颜色
				 */
				a:visited{
					color:red;
				}
				/*
				 * :hover伪类表示鼠标移入的状态
				 * 
				 */
				a:hover{
					color: skyblue;
				}
				/*
				 * :active表示的是超链接被点击的状态
				 */
				a:active{
					color: yellow;
				}
				/*
				 * hover/active也可以为其他元素设置
				 * IE6中，不支持超链接以外的元素设置
				 * 
				 */
				p:hover{
					background-color: yellow;
				}
				p:active{
					background-color: red;
				}
				
				/*
				 * 文本框获取焦点以后，修改背景颜色为黄色
				 * 
				 */
				input:focus{
					background-color:yellow;
					}
					
					/*
					 * 为p标签中的内容使用样式
					 * 可以使用::selection伪类
					 * 注意：这个伪类在火狐中需要另一种编写方式：：-moz-selection
					 */
					p::-moze-selection{
						background-color: orange;
						}
					/*
					 * 兼容大部分浏览器
					 */
                    p::selection{
						background-color: orange;
						}
			</style>
	</head>
	<body>
			<a href="http://www.baidu.com">我是一个超链接</a>
			<br/>
			<a href="http://www.bu12.com">我是一个超链接</a>
			<br />
			<a href="http://www.bau22.com">我是一个超链接</a>
			<br />
			
			<p>我是一个p标签</p>
			<br />
			<!--
            	使用input可以输入一个文本输入框
            -->
            <input type="text"  />
	</body>
</html>