《HTML 5与CSS 3权威指南（第3版·下册）》——19.3结构性伪类选择器

19.3 结构性伪类选择器

本节介绍CSS 3中的结构性伪类选择器，在介绍结构性伪类选择器之前，先来介绍一下CSS中的伪类选择器及伪元素。

19.3.1 CSS中的伪类选择器及伪元素

1.伪类选择器概述

我们知道，在CSS中，可以使用类选择器把相同的元素定义成不同的样式，如针对一个p元素，我们可以做如下所示定义。
p.right{text-align:right}
p.center{text-align:right}

然后在页面上对p元素使用class属性，把定义好的样式指定给具体的p元素，代码如下所示。

在CSS中，除了上面所述的类选择器之外，还有一种伪类选择器，这种伪类选择器与类选择器的区别是，类选择器可以随便起名，如上面的“p.right”与“p.center”，你也可以命名为“p.class1”与“p.class2”，然后在页面上使用“class='class1'”与“class='class2'”，但是伪类选择器是CSS中已经定义好的选择器，不能随便起名。在CSS中我们最常用的伪类选择器是使用在a(锚)元素上的几种选择器，它们的使用方法如下所示。

a:link {color:#FF0000;text-decoration:none}
a:visited {color:#00FF00;text-decoration:none}
a:hover {color:#FF00FF;text-decoration:underline}
a:active {color:#0000FF;text-decoration:underline}

2.伪元素选择器概述

伪元素选择器是指并不是针对真正的元素使用的选择器，而是针对CSS中已经定义好的伪元素使用的选择器，它的使用方法如下所示。
选择器：伪元素{属性：值}
伪元素选择器也可以与类配合使用，使用方法如下所示。

选择器.类名：伪元素{属性：值}
在CSS中，主要有如下四个伪元素选择器。

（1）first-line 伪元素选择器

first-line伪元素选择器用于向某个元素中的第一行文字使用样式。
代码清单19-4是它的一个使用示例，在该示例中，有一个p元素，在该元素内存在两行文字，使用first-line 伪元素选择器将第一行文字设为蓝色。

这段代码的运行结果如图19-6所示。

（2）first-letter伪元素选择器

first-letter伪元素选择器用于向某个元素中的文字的首字母（欧美文字）或第一个字（中文或日文等汉字）使用样式。

代码清单19-5是first-letter伪元素选择器的一个使用示例，在该示例中，有两段文字—一段是英文，另一段是中文，使用first-letter伪元素选择器来设置这两段文字的开头字母或文字的文字颜色为蓝色。

这段代码的运行结果如图19-7所示。

（3）before伪元素选择器

before伪元素选择器用于在某个元素之前插入一些内容，使用方法如下所示。
//可以插入一段文字
<元素〉：before
{

content：插入文字

}
//也可以插入其他内容
<元素〉：before
{

content：url(test.wav)

}

（4）after伪元素选择器

after伪元素选择器用于在某个元素之后插入一些内容，使用方法如下所示。
<元素〉：after
{

content：插入文字

}
//也可以插入其他内容
<元素〉：after
{

content：url(test.wav)

}
代码清单19-7是after伪元素选择器的一个使用示例，在该示例中有一个ul列表，这个ul列表的内容为某个网站上播放电影的节目清单。该列表中有几个列表项目，每个列表项目中存放了对于某部电影的超链接，使用after伪元素选择器在每个超链接的后面加入“（仅用于测试，请勿用于商业用途。）”的文字，并且将文字颜色设为红色。

这段代码的运行结果如图19-9所示。