动态伪类是一类行为类样式,这些伪类并不存在于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 伪类未按规范要求的算法来计算针对性