第29章　伪类

伪类是选择符的螺栓，用来指定链接或者与其相关的选择符的状态；它是一种特殊的类选择符，是能被支持CSS的浏览器自动识别的特殊选择符，伪类最常用的用法是表示对链接对象的不同状态下定义不同的样式效果。在本章内容中，先介绍伪类的概念，然后着重讲述以下四个在链接中常用的伪类，再简单地介绍一些其他伪类。

伪类与选择符间用冒号相连，在CSS中，伪类是对文本或图像处于链接状态的修饰，故选择符大部分下是a标记，本章主要对a标记做实例讲解，其中伪类的四种常用形式是本章要讲解的，内容如下：

❑“：link”用在为访问的链接上；

❑“：hover”用于鼠标光标置于其上的链接；

❑“：active”用于获得焦点（如“被单击”）的链接上；

❑“：visited”用在已经访问过的链接上。

29.1　伪类概念

伪类可以看做是一种特殊的类选择符，是能被支持CSS的浏览器自动识别的特殊选择符，伪类的最大的用处是对链接在不同状态下定义不同的样式。伪类的语法是在原有的语法里加上一个伪类，在选择符中用冒号接上伪类的类型，然后在大括号中输入CSS样式来修饰页面。伪类的作用很大，最关键的是链接前后过程中的状态，其语法形式如下。

selector：pseudo-class

{

property：value；

}

伪类的表示（选择符：伪类{属性：值}）中，选择符如链接的＜a＞，伪类类型有四种，分别是link、hover、active和visited，大括号里的是CSS代码。在前面提到过，伪类的选择符（selector）主要是a标记，故在稍后的语法详解中都以a作为选择符，其中selector会省略。

伪类和类不同，是CSS已经定义好的，不能像类选择符一样随意用别的名字，根据上面的语法可以解释为对象（选择符）在某个特殊状态下（伪类）的样式。类选择符及其他选择符也同样可以和伪类混用。

如给链接设置伪类，链接的标记是＜a＞，现在设置链接时的颜色为红色，当鼠标指针放到链接上时颜色变成蓝色了，当被单击时颜色为橙色，而访问过后的颜色为黄色，先从实例让读者对伪类有个初步的认识，为了理解接下来的学习，代码29.1表示伪类的四种类型的用法。

代码29.1　源代码\第29章\伪类的类型用法.html

—————————————文件名：伪类的类型用法.html——————————————

01 ＜html＞

02 ＜head＞

03 ＜title＞伪类的类型用法＜/title＞

04 ＜style type="text/css"＞

05 /设置伪类的链接状态/

06 a：link

07 {

08 /链接颜色/

09 color：red；

10 }

11 /鼠标光标置于其上的状态/

12 a：hover

13 {

14 /鼠标悬停时/

15 color：blue；

16 }

17 /获得焦点的状态/

18 a：active

19 {

20 /被点击时的颜色/

21 color：orange；

22 }

23 /访问过后的状态/

24 a：visited

25 {

26 /访问过后的颜色/

27 color：yellow；

28 }

29 ＜/style＞

30 ＜/head＞

31 ＜body＞

32 ＜a href="#"＞HTML+CSS完全自学手册＜/a＞

33 ＜/body＞

34 ＜/html＞

【代码解析】代码第32行对链接（＜a href=“#”＞＜/a＞表示链接地址为本页）的伪类类型设置了不同的颜色。其中代码第6～10行的a：link表示链接的颜色；代码第12～16行的a：hover表示鼠标指针放到链接处时的颜色；代码第18～22行的a：active表示单击时的颜色，当新的网页打开后或以前曾访问过该链接时，效果是被a：visited设置的颜色（代码第24～28行），效果如图29.1所示。

图　29.1　伪类的类型用法

注意　伪类的四种状态都是在链接前后所体现的效果，前提是对文本或图片先做好链接。