如何使用CSS的伪类

CSS的伪类用于向某些选择器添加特殊的效果，最常用的便是向超链接中添加样式，如颜色，字体大小，粗细等。使用标签选择器同样可以设置超链接的样式，但是加入了伪类可以让超链接在操作过程中展示不同的效果。

操作方法

【步骤01】

在伪类的使用过程中，锚伪类是应用最为广泛的，链接的不同状态都可以用伪类以不同的方式显示，这些状态包括：未被访问状态，已被访问状态，鼠标悬停状态和激活状态。我们使用a : link { color: red }来设置未被访问的链接，如下图所示。

【步骤02】

使用a:visited {color : pink;}设置已访问过的链接，当页面已经在浏览器打开并点击链接后，显示的便是访问过的效果，如下图所示。如果想要还原成未访问之前的状态，重新打开页面是不行的，需要清除浏览器的缓存才可。

【步骤03】

使用a:hover {color : yellow;}设置鼠标悬停在链接上显示的效果，当鼠标显示为手型时，页面链接变为设置的效果，如下图所示。

【步骤04】

使用a:active {color : green;}设置激活链接的效果，只有当鼠标点击的时候才起作用。设置a标签被激活时的样式（被点击时的样式），代码如下图所示。需要注意的是一定要按照顺序a:link，a:visited，a:hover，a:active来设置，否则不能达到预期的效果。

【步骤05】

first-child 伪类，可以使用first-child伪类来选择元素的第一个子元素，如下图第一个元素分别为<p>元素的第一个元素和<li>元素的第一个元素。

【步骤06】

:lang 伪类，可以为不同的语言定义特殊的规则。如下图所示，lang 类为属性值为 no 的q元素定义引号的类型：q:lang(no) { quotes: "（" "）" }。

【步骤07】

:focus伪类，可以设置点击鼠标时的聚焦效果，如下图所示，当我们点击用户名文本框时出现黄色的背景色。

注意锚伪类的使用顺序问题。