伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child 。
因为伪类选择器很多，比如有链接伪类、结构伪类等，所以这里先给大家讲解常用的链接伪类选择器。
1、链接伪类选择器：
1、：link
语法：
Selector : link { sRules }说明：
设置a对象在未被访问前的样式表属性。
IE3将:link伪类的样式表属性作用于visited伪类。
默认值由浏览器决定。
对于无href属性（特性）的a对象，此伪类不发生作用。
请参阅body对象的link属性（特性）和document对象的linkColor特性。
示例：
a:link {
font-size: 14pt;
text-decoration: underline;
color: blue;
}
2、：visited
语法：
Selector : visited { sRules }说明：
设置a对象在其链接地址已被访问过时的样式表属性。
IE3将:link伪类的样式表属性作用于visited伪类。
默认值由浏览器决定。定义网页过期时间或用户清空历史记录将影响此伪类的作用。
对于无href属性（特性）的a对象，此伪类不发生作用。
请参阅body对象的vlink属性（特性）和document对象的vlinkColor特性。
示例：
a:visited {
font-size: 14pt;
text-decoration: underline;
color: blue; }
3、：hover
语法：
Selector : hover { sRules }说明：
设置对象在其鼠标悬停时的样式表属性。
在CSS1中此伪类仅可用于a对象。且对于无href属性（特性）的a对象，此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。
目前IE5.5+仅支持CSS1中的:hover。
示例：
a:hover {
font-size: 14pt;
text-decoration: underline;
color: blue;
}
a:hover span{
color:red;
}
4、：active
语法：
Selector : active { sRules }说明：
设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性。
在CSS1中此伪类仅可用于a对象。且对于无href属性（特性）的a对象，此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。并且:active状态可以和:link以及:visited状态同时发生。
目前IE5.5+仅支持CSS1中的:active。
示例：
a:active {
font-size: 14pt;
text-decoration: underline;
color: blue;
} 2、链接伪类选择器实际工作开发中的写法：
/* a 是标签选择器 所有的链接 */
a {
color: gray;
}
/* :hover 是链接伪类选择器 鼠标经过 */
a:hover {
color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
}3、链接伪类选择器注意事项
1. 为了确保生效，请按照 LVHA 的循顺序声明 :link－:visited－:hover－:active。
2. 记忆法：love hate 或者 lv 包包 hao 。
3. 因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。
4、练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>链接伪类选择器</title>
<style>
/* 文本属性：去掉下划线 */
a {
text-decoration: none;
}
/* 1.设置a对象在未被访问前的样式表属性 */
a:link {
color: rgb(230, 10, 237)
}
/* 2.设置a对象在其链接地址已被访问过时的样式表属性 */
a:visited {
color: orange;
}
/* 3.设置对象在其鼠标悬停时的样式表属性 */
a:hover {
color: blue;
}
/* 4.设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性 */
a:active {
color: rgb(241, 9, 9);
}
</style>
</head>
<body>
<!-- 访问链接 -->
<a href="#">小猪佩奇</a> <br />
<!-- 未访问该链接，两个链接用来做访问和未访问的对比 -->
<a href="http://www.com">三只松鼠</a>
</body>
</html>
1579
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
