规范化的链接样式顺序？

最新推荐文章于 2021-06-04 04:36:49 发布

飘零雾雨

最新推荐文章于 2021-06-04 04:36:49 发布

阅读量1k

点赞数

分类专栏： CSS 文章标签： xhtml 测试 html opera 浏览器 ie

本文链接：https://blog.csdn.net/storm0/article/details/1816267

版权

CSS 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

　　有的时候文章的相关链接太多了，一时半会不好分辨哪些文章是自己已看过的，哪些又是还没有来得及研读的等等，虽说是个小小的问题，但也得耗费你的一点时间:)

　　既然只是个小小的问题，解决的方法当然也是极为简单的，所要求的只是一个好记性和熟练程度或者好习惯。　

　　举一例子来说先：

　　［演示地址：http://www.doyoe.com/model/xhtmlcss/style/link.htm］

CSS部分：

a:link {
color:#000;
}
a:visited {
color:#050;
}
a:focus {
color: #f00;
}
a:hover {
color:#f00;
}
a:active {
color:#630;
}

XHTML部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="Doyoe, 飘零雾雨, edzmaster@gmail.com" />
<title>test</title>
</head>
<body>
<h3>亲和力较好的链接样式顺序：</h3>
<ul>
<li><a href="1.htm">测试</a></li>
<li><a href="2.htm">测试</a></li>
<li><a href="3.htm">测试</a></li>
<li><a href="4.htm">测试</a></li>
<li><a href="5.htm">测试</a></li>
<li><a href="6.htm">测试</a></li>
</ul>
</body>
</html>

　　从上面这个简单的例子中就可以比较方便的区别出读与未读的关系。链接的四种状态分别为：a:link, a:visited, a:hover和a : active。意思是：链接，已访问过的链接，鼠标经过链接时，鼠标点击链接时。缩写起来的顺序就是LVHA（分别取其首字母），有人为了方便记忆，把这几个字母溶入了两个单词：love hate（喜欢和讨厌）。为第一个提出这种方便记忆方法的哥们赞一个:)

　　有人会说上面还有一个a:focus呢，这个又是用来做什么的？

　　这个其实也是一种链接状态，就是当你在键盘上按Tab键时获得焦点的那个链接的即时状态，遗憾的是ie并不支持（ie中按Tab键显示的效果为a:active时的状态），只有在FF,Opera等浏览器下才能看到效果。