CSS3 知识量：11 - 43 - 138
伪类选择器在语法上以冒号（:）开头，形如：
E:class{property:value}其中，E是HTML中的元素；class是伪类选择器的名称；property是属性名；value是属性值。
动态伪类选择器的分类如下表所示：
| 选择器 | 说明 |
|---|---|
| E:link | 匹配的元素被定义了超链接且未被访问过。常用于锚点。 |
| E:visited | 匹配的元素被定义了超链接且已被访问过。常用于锚点。 |
| E:active | 匹配的元素被激活。常用于锚点和按钮。 |
| E:hover | 鼠标停留在E元素上。 |
| E:focus | 匹配的元素获得焦点。 |
需要注意的是：在设置锚点伪类时，需要遵循LoVe/HAte（爱恨）原则，即：link-visited-hover-active，需要按照此顺序来设置动态伪类选择器。
下面是一个示例：
<!DOCTYPE html>
<html>
<head>
<title>动态伪类选择器</title>
<meta charset="UTF-8">
<style type="text/css">
/*默认情况下的链接*/
.link{
padding: 5px;
background-color: #5fa134; /*绿色*/
color: #fff;
}
/*悬浮状态下的效果*/
.link:hover{
background-color: #0077b9; /*蓝色*/
}
/*点击时的效果*/
.link:active{
background-color: #F7A35C; /*橙色*/
}
</style>
</head>
<body>
<p>动态伪类选择器不同状态的效果演示：</p>
<div>
<a href="#" class="link">点击链接</a>
</div>
</body>
</html>以上示例运行时，默认情况下，链接背景颜色为绿色；当鼠标悬停在链接上时，链接背景颜色变为蓝色；当鼠标点击链接时，链接背景变为橙色。
Copyright © 2017-Now pnotes.cn. All Rights Reserved.
编程学习笔记 保留所有权利
MARK:3.0.0.20240214.P35
From 2017.2.6