动态伪类是一类行为类样式，这些伪类并不存在于HTML中，只有当用户与页面进行交互时才能体现出来。
- :link 超链接点击之前
- :visited 链接被访问过之后
- :hover “悬停”：鼠标放到标签上的时候
- :active “激活”： 鼠标点击标签，但是不松手时。
PS：以上样式，只能用于超链接a标签。
动态伪类选择器为伪类选择器的一种，其语法如下：
E:pseudo-class{property:value}
其中E为HTML中的元素，pseudo-class是CSS的伪类选择器名称，property是CSS的属性， value为CSS属性值。
动态伪类并不存在于HTML中，只有当用户和网站交互的时候才能体现出来。动态伪类包含两种，第一种是在链接中常看到的锚点伪类，另一种为用户行为伪类。
除了E:active需要IE8和以上版本支持外，其他的动态伪类选择器所有浏览器都支持。
用如下代码测试动态伪类选择器，实现按钮在被选中和点击时候的效果：
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>使用动态伪类选择器美化按钮</title>
<styletype="text/css">
.download-info{
text-align:center;
}
/*默认状态下的按钮效果*/
.btn{
background-color:#0074cc;
*background-color:#0055cc;
/*css渐变制作背景图片*/
background-image:-ms-linear-gradient(top,#0088cc,#0055cc);
background-image:-webkit-gradient(linear,0,0,0100%,from(#0088cc),to(#0055cc));
background-image:-webkit-linear-gradient(top,#0088cc,#0055cc);
background-image:-o-linear-gradient(top,#0088cc,#0055cc);
background-image:-moz-linear-gradient(top,#0088cc,#0055cc);
background-image:linear-gradient(top,#0088cc,#0055cc);
background-repeat:repeat-x;
display:inline-block;
*display:inline;
border:1pxsolid#cccccc;
*border:0;
border-color:#ccc;
/*css3的色彩模块*/
border-color:rgba(0,0,0,0.1)rgba(0,0,0,0.1)rgba(0,0,0,0.25);
border-radius:6px;
color:#ffffff;
cursor:pointer;
font-size:20px;
font-weight:normal;
filter:progid:dximagetransform.microsoft.gradient(startcolorstr='#0088cc',endcolorstr='#0055cc',gradienttype=0);
filter:progid:dximagetransform.microsoft.gradient(enabled=false);
line-height:normal;
padding:14px,24px;
/*css3文字阴影特性*/
text-shadow:0 -1px 0 rgba(0,0,0,0.25);
text-decoration:none;
vertical-align:middle;
*zoom:1;
}
/*悬浮状态下按钮效果*/
.btn:hover{
background-position:0-15px;
background-color:#0055cc;
*background-color:#004ab3;
color:#ffffff;
text-shadow:0,-1px0rgba(0,0,0,0.25);
/*css3动画效果*/
-webkit-transition:background-position0.1slinear;
-moz-transition:background-position0.1slineaar;
-ms-transition:background-position0.1slinear;
-0-transition:background-position0.1slinear;
transition:background-position0.1slinear;
}
/*点击时按钮效果*/
.btn:active{
background-color:#0055cc;
*background-color:#004ab3;
background-color:#0040999;
background-image:none;
outline:0;
/*css3盒子阴影特性*/
box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.15);
color:rgba(255,255,255,0.75);
}
/*获得焦点按钮效果*/
.btn:focus{
outline:thindotted#333;
outline:5px auto-webkit-focus-ring-color;
outline-offset:-2px;
}
</style>
</head>
<body>
<div class="download-info">
<ahred="#"class="btn">viewprojectongithub</a>
</div>
</body>
</html>
显示效果如下（使用的是.btn默认样式）：
当光标放在按钮上的时候的效果（使用的是.btn:hover时候的样式）：
当按钮被点击时候的效果（使用的是.btn:active对应的样式）：
爱恨原则（LoVe/HAte）:
锚点伪类的设置必须遵守一个“爱恨原则”LoVe/HAte, 也就是link-visited-hover-active.（L-V-H-A），另外在IE6， IE7， IE8中a:hover, a:active, a:visited并没有按照规范描述的算法来计算它们的针对性（specificity），
而是根据链接的实际状态来决定使用哪个规则集里面的声明。
IE6 IE7(Q) IE8(Q) 中 A 元素的 :visited :hover :active 伪类未按规范要求的算法来计算针对性