伪类专门用来表示元素的一种特殊的状态
例如：访问过的超链接，普通的超链接，获取焦点的文本框
当我们需要为这些特殊状态的元素设置样式时候，就可以用伪类
给链接定义样式
- 正常连接
语法：a:link - 访问过的链接
语法：a:visited
浏览器是通过历史记录来判断一个链接是否访问过
由于涉及到用户的隐私问题，所以使用visited伪类只能设置字体颜色 - 鼠标移入的连接
语法：a:hover - 正在点击的连接
语法：a:active - :hover 和 :active 也可以为其他元素设置
但IE6中，不支持对超链接以外的元素设置
其他：
-
获取焦点时候的状态
语法： :focus -
指定元素前
语法： :before -
指定元素后
语法： :after -
选中的元素
语法： ::selection
这个伪类在火狐中需要采用另一种方式使用 -moz-selection
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>伪类选择器</title>
<style type="text/css">
/*
为没访问过的链接设置一个颜色为绿色
*/
a:link{
color:green;
}
/*
为访问过的链接设置为红色
*/
a:visited{
color:red;
}
/*
:hover 表示鼠标移入的状态
*/
a:hover{
color:blue;
}
/*
:active 表示的是超链接被点击的状态
*/
a:active{
color:black;
}
/*
:hover 和 :active 也可以为其他元素设置
IE6中，不支持对超链接以外的元素设置
*/
p:active{
background-color:yellow;
}
/*
:focus 表示获取焦点时候的状态
*/
input:focus{
background-color:yellow;
}
/*
为p标签选中的内容使用样式
*/
p::selection{
background-color:orange;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">访问过的链接</a>
<br /><br />
<a href="http://www.baidu.com">没访问过的链接</a>
<p>我是一个段落</p>
<!-- 使用input可以创建一个文本输入框-->
<input type="text" />
</body>
</html>
1823
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
