什么是链接伪类

  • 2018-08-06 21:08:39
  • 阅读次数:
  • 作者:盈岚科技小编
  • 来源:http://www.lyjtt.cn

CSS2.1定义了两个只应用于超链接的伪类。在网页HTML和网页XHTML 1.0及1.1中,超链接是有href属性的所有a元素,在XML语言中,超链接则可以是任何元素,只要它作为另一个资源的链接。

:link

指示作为超链接(即有一个href属性)并指向一个未访问地址的所有锚。注意,有些网页浏览器可能会不正确地将:link解释为指向任何超链接,包括已访问和未访问的超链接

:visited

指示作为已访问地址超链接的所有锚

第一个伪类看上去有些多余。毕竟,如果一个锚尚未访问过,那它肯定是未访问的链接,不是吗?

如果是这样,我们所需要的应该只是:

a {color:blue;}

a:visited {color:red;}

尽管这种格式看上去是合理的,但这确实还不够。以上规则中,第一个规则不仅应用于未访问的链接,还会应用到以下锚:

<a name=" sect ion4 ">4. The Lives o£ Meerkats</a>

相应的文本就会变成蓝色,因为如上所示,a元素与规则a{color:blue;}匹配。因此,为了避免将链接样式应用到目标锚,要使用:link伪类:

a:link {color: blue;}/* unvisited links are blue */

a:visited {color: red;}/* visited links are red */

你可能已经意识到了,:link和:visited伪类选择器在功能上与body属性link和 vlink是等价的。假设一个网页设计师希望所有未访问页面的锚都是紫色,而所有已访问页面的锚是银色。在HTML 3.2中,这要如下指定:

<body link="purple" vlink="silver">

在CSS中,利用以下规则可以达到同样的效果:

a:link {color:purple;} 

a:visited {color: silver;}

当然,对于CSS伪类,不仅可以应用颜色,还可以应用更多样式。假设你希望已访问链接为斜体,而且除了银色外还有一条贯穿线

只需以下样式就可以达到目的:

a:visited {color: silver; text-decoration: line-through; font-style: italic;}

现在有必要再来回顾类选择器,并说明类选择器如何与伪类结合。例如,假设你希望指向除了自己建设网站以外的外部网站资源的链接改变颜色。如果为每一个这样的锚指定一个类,就很容易做到:

<a href="http://www.mysite.net/">My home page</a>

<a href="http://www.site.net/" class="external">Another home page</a>

要为外部链接应用不同的样式,只需如下的一条规则:

a.external:link, a.external:visited {color: maroon;}

这个规则会使以上标记中的第二个锚变成紫红色,而第一个锚仍保持为超链接的默认颜色(通常是蓝色)。

这个一般语法也适用于ID选择器:

a#£ooter-copyright:link{font-weight: bold;}

a#footer-copyright:visited {font-weight: normal;}

尽管:link和:visited非常有用,但它们是静态的——第一次显示之后,它们一般不会再改变文档的样式。CSS2.1中还有一些没有这种静态性的伪类,接下来将详细说明。


当前文章标题:什么是链接伪类

当前URL:http://www.lyjtt.cn/news/wzzz/what-link-pseudo-classes.html

上一篇:什么是网页伪类选择器

下一篇:什么是动态伪类

网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)