谈一谈标签a的链接状态

<a>标签

<a>标签用来定义超链接，表示从一个页面链接到另一页面；

<a>标签最重要的属性石href，表示指向链接页面的地址，除此之外，一般还是用属性target表示页面打开的位置，常用属性值为_blank、_parent、_self、_top。

在浏览器中，<a>标签的默认外观是：

• 未访问过的链接字体颜色为蓝色并且带有下划线   
• 活动链接（点击时一刻）字体颜色为红色并且带有下划线   
• 已访问过的链接字体颜色为紫色并且带有下划线    

<a>标签链接有四种链接状态：

• a:link - 正常，未访问过的链接
• a:visited - 用户已访问过的链接
• a:hover - 当用户鼠标放在链接上时
• a:active - 链接被点击的那一刻（在鼠标点击与释放之间发生的事件）

当设置链路状态的样式时，也有一些顺序规则：

a:hover 必须跟在 a:link 和 a:visited后面，除此之外，a:active 必须跟在 a:hover后面。

如果不按照规定顺序使用，可能使得链接状态的样式效果无法体现出来，具体例子如下：

a:link {color:gray;}      /* 未访问链接为灰色*/
a:visited {color:blue;}  /* 已访问链接为蓝色 */
a:hover {color:red;}  /* 鼠标移动到链接上时为 红色*/
a:active {color:yellow;}  /* 鼠标点击时黄色*/

• 当a:hover在a:link 和 a:visited之前时，发现鼠标悬浮在链接上时颜色还是表现为未访问或已访问状态的样式颜色（未访问时灰色，已访问为蓝色）；
• 当a:hover在a:link之后，a:visited之前时，发现当鼠标悬浮在未访问链接上时，状态颜色正常变化为红色，而当链接已被访问后，这时鼠标悬浮在已访问的链接上时，发现颜色并非a:hover定义的颜色，而是a:visited中定义的颜色；
• 当a:avtive在a:hover之前时，在点击后发现，链接颜色依旧是a:hover定义的颜色（红色），而a:active中定义的颜色无效；

所以，要正确显示链接状态效果，必须要严格按照规定的顺序来定义，否则会出现其中某个链接状态颜色无法正确显示。

除以上之外，<a>标签还有一些注意的地方，有时候你会发现新设置的链接颜色并非是未访问状态的颜色，而是已访问状态的颜色，这是因为你的链接其实在某时刻已经访问过了，并且在浏览器中留有历史记录，所以你再次使用它时，他的表现是已访问的。除此之外，href中的链接地址必须有效，也就是要能正常访问，否则浏览器始终将链接视为未访问状态。