CSS专题（五）：详说链接的伪类A hover等

一 背景

　　关于伪类，或链接伪类，可能我们都知道a标签的一些写法，a:hover,a:focus,a:visited,然后写下不同的样式，表示链接在各种状态下的表现。我们可能也遇到过input:focus的写法，表示输入框遇到了焦点的样式。对于伪类，多数人一知半解，或仅仅记住lvoe等口诀。更让人不清晰的是各个伪类的具体含义。下面较为详细的解说。

二 链接伪类

　　有些伪类是专为链接而生的，而且这个链接必须含有href属性，以示其为一个"链接"。在html中，链接就是a标签。有以下两个伪类只作用于链接：

1. :link，表示一个未访问过的链接

2. :visited 表示已经访问过的链接，表示鼠标已经点击过，或者用键盘触发过。浏览器硬盘会记住用户对该链接的点击情况，所以，如果上次点击了某个链接，再次打开，还是visited的样式。

　　其中，浏览器或默认链接的样式。但通常我们会覆写。如下：

a{color：gray}
a:link{color:blue}
a:visited{color:red}

看的出来，此时，a{color:gray}已经没有用了，被a:link{color:blue}覆盖了，所以a标签的文字颜色是蓝色。

三 动态伪类

　　CSS2.1增加了三个动态伪类。常常用来设置链接的样式，其实，这三个伪类可以应用在很多元素上。如下：

1. :focus，表示该元素获得了焦点时的样式，一般，通过键盘的Tab键获得焦点。如果通过鼠标点击，可能看不到a标签的focus样式，

2. :hover，表示鼠标悬停在元素上的样式。在a标签中非常常用。

3. :active，表示触发（鼠标或键盘）之前，点击之后，鼠标未松开时的样式。该状态需仔细测试，慢慢琢磨后才能体会其妙处。

四 总结

　　以上，对a标签的链接，通常要注意伪类的顺序。一般为：link,visited,hover,active,现在更流行：link,visited,focus,hover,active。对于一般的元素，只能使用focus,hover,active等，最常用的是输入框获得焦点后的样式：

input :focus{
    border:1px #F8A746 solid;
    outline:1px #F6E0C5 solid;
}

五 示例

　　关于伪类的完整示例：www.zangb.com/html/demo/css/css_hover.html

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　方劲松 南京焦点科技 写于鼓楼清凉山 2012-8-23

转载于:https://www.cnblogs.com/fangjins/archive/2012/08/24/2651765.html