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

16.3　结构性伪类选择器

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

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

1.伪类选择器概述

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

p.right{text-align:right}

p.center{text-align:right}

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

<p>测试文字</p>

<p>测试文字</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伪元素选择器用于向某个元素中的第一行文字使用样式。

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

代码清单16-4　first-line伪元素使用示例

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

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

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

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

代码清单16-5　first-letter伪元素选择器

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

      图16-6　first-line伪元素使用示例  图16-7　first-letter伪元素使用示例

（3）before伪元素选择器

before伪元素选择器用于在某个元素之前插入一些内容，使用方法如下所示。

// 可以插入一段文字

<元素〉：before

{

    content：插入文字

}

// 也可以插入其他内容

<元素〉：before

{

    content：url(test.wav)

}

代码清单16-6是before伪元素选择器的一个使用示例，在该示例中有一个ul列表，该列表中有几个li列表项目，使用before伪元素选择器在每个列表项目的文字的开头插入“·”字符。

代码清单16-6　before伪元素选择器的使用示例

这段代码的运行结果如图16-8所示。

（4）after伪元素选择器

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

<元素>：after

{

    content：插入文字

}

// 也可以插入其他内容

<元素>：after

{

    content：url(test.wav)

}

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

代码清单16-7　after伪元素选择器的使用示例

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

      图16-8　before伪元素使用示例      图16-9　after伪元素选择器使用示例