2016-12-21
伪类（pseudo-class）令你可以在为HTML元素定义CSS属性的时候将条件和事件考虑在内。
我们来看一个例子。正如你所知道的，在HTML里，链接是通过a元素来定义的。因此，在CSS里，我们可以将a作为一个选择器（selector）：
a {color: blue;}
一个链接可以有不同的状态。例如，它可以是已访问过的，也可以是未访问过的。你可以通过伪类分别为访问过的链接和未访问过的链接设
置不同的样式。
a:link {color: blue;}a:visited {color: red;}
为未访问过的链接和已访问过的链接分别使用伪类a:link和a:visited。活动的链接对应的伪类为a:active，有鼠标悬停的链接对应的伪类为
a:hover。
我们将逐个解释这四个伪类，并给出示例。
伪类：link
伪类:link用于浏览者从未访问过的链接。
在下面的示例代码中，我们将未访问过的链接设为浅蓝色。
a:link {color: #6699CC;}
伪类： visited
伪类:visited用于浏览者已访问过的链接。比如，下面的代码将已访问过的链接设为深紫色：
a:visited {color: #660099;}
伪类： active
伪类:active用于活动的链接（即获得当前焦点的链接）。
下例将活动的链接设为具有黄色背景：
a:active {background-color: #FFFF00;}
伪类： hover
伪类:hover用于有鼠标悬停的链接。
这能制造出有趣的效果。例如，如果你要当鼠标光标移到链接上时将链接显示为橙色斜体，那么CSS可以这样写：
a:hover {color: orange;font-style: italic;}
例1：有鼠标悬停的链接的效果
为链接设置悬停效果十分流行。所以，我们将多看几个:hover伪类的例子。
例1a：字符间距
我们在第5课学过，可以用letter-spacing属性来调整字符间距。现在为了取得特殊效果，我们将它应用到链接上：
a:hover {letter-spacing: 10px;font-weight:bold;color:red;}
例1b：大写和小写
同样在第5课我们学过，可以通过text-transform属性来转换字母的大小写。这也可用于为链接制造效果：
a:hover {text-transform: uppercase;
font-weight:bold;
color:blue;
background-color:yellow;}
希望以上的这些信息能够帮助您，如果您还有关于大连网站制作，大连网站建设及企业邮箱等相关问题，请与我们联系，新图闻科技将竭诚为您服务！
