关于css中的a:visited的问题

html-css014

关于css中的a:visited的问题,第1张

a:link {color:#000}

a:visited {color:#000}

a:hover {color:#666}

那你为什么不把link和visited设置一样的呢?这不就解决问题了吗?

_____

有些东西如果你非要以正确的逻辑过程来要求结果,那是做不到的。还有,你说不设置link和visited的话,那么这两个样式就是空或是继承默认,这跟设置它们同样是两回事,两种效果。

按我说的方法你就会实现你要求的那样,现在讨论不是怎样实现的逻辑过程,而是你要的结果。

打个比方,从山下到山顶有多条路,你只要到达山顶了你还要刻意追求哪条路吗?你这样做会很累的。规则逻辑是死的,人是活的,你要的是结果,网页设计最终追求的是结果,既然没有其他更好的办法,难道你就放弃吗?

a:link就是链接平常的状态,a:visited就是链接被访问过的状态,

a和a:link的区别我就举个例子吧:

css样式:a{

color:red}

a:link{

color:blue}那么以下

标签内的元素颜色显示如下,

<a>red</a>

<a

herf="#">bule</a>

实际上,大多数情况我们直接用a而不是a:link,一般情况下最终效果都会完全相同。

对页面的a标签(链接)进行控制,就用到伪类了,下面介绍一下各伪类的作用与用法:

1.所有链接

首先,伪类:link和a元素选择器(来源于链接标记的<a href ...>部分)组合,创建选择器a:link。

a :link {

color:#f00

}

这个简单的选择器将处理所有<a>元素的实例,将所有未访问过的的链接变为红色。由于没有创建 相应的选择起来覆盖浏览器默认访问过的链接样式,所有访问过的链接也仍然是红色。

2.访问过的链接

为了区别显示访问过的链接,只需要结合<a>元素和:visited伪类创建一个简单的选择器即可。

a :visited {

color:#999

}

现在所有未访问过的链接是红色,而所有访问过的链接将变成淡灰色(如图7-2所示)。让访问过的链接和没有访问过的链接有所不同的是非常重要的。这是一个大家都接受的惯例,并且可以立即突出在本机上已经访问过的所有连接。

3.:hover伪类

假定有一个很大的连接列表,或者有一个到处都是链接的段落,如果没有某种形式的交互,用户很容易就会点错链接,从而被带到错误的目的网页。强大的:hover伪类可以解决这个问题,该伪类除了能够提高可用性外,也是非常吸引人的。

同样,这个选择器首先找到所有<a>元素的实例,但是仅仅当用户鼠标移动到链接文本时,才真正执行。

a:hover {

color:#333

这个简单的规则在鼠标放在链接上时将所有的链接文本变成深灰色,而不管该链接是否已经访问过。

4.:active伪类

:active伪类主要关注鼠标真正点击链接时的样式。该伪类可以提高网页的可用性。

a:active {

color:#333

}

在这个例子中,当用户点击链接时,只要当前页面一直保持浏览,文本将变成黑色,这样主要是提供一个额外的提示,以表明用户目前正在处理那个网页。

另外要非常注意的是这几个伪类在声明时的顺序:如果你在同一个选择器上使用几种不同的伪类,声明时一定要注意他们之间的先后顺序,记住,一定是L V H A(字母为各个伪类的首字母),这个顺序非常重要。

例如,如果你将a:hover选择器放在a:visited选择器之上(也就是说你的顺序是L H V A),由于层叠作用,你会发现a:hover声明对于所有访问过的链接没有任何影响。即使鼠标停留在连接上,文本仍然保持淡灰色,而不会发生预期的动作。或许有某些情况需要这种方法,但是这种场合应该很少,因此,最好是要避免。