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元素，代码如下所示。
<p class="right">测试文字</p>
<p class="center">测试文字</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-4 first-line伪元素使用示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>first-line伪元素使用示例</title>
<style type="text/css">
p:first-line{color:#0000FF}
</style>
</head>
<body>
<p>段落中的第一行。<br>段落中的第二行</p>
</body>
</html>
这段代码的运行结果如图19-6所示。
（2）first-letter伪元素选择器
first-letter伪元素选择器用于向某个元素中的文字的首字母（欧美文字）或第一个字（中文或日文等汉字）使用样式。
代码清单19-5是first-letter伪元素选择器的一个使用示例，在该示例中，有两段文字—一段是英文，另一段是中文，使用first-letter伪元素选择器来设置这两段文字的开头字母或文字的文字颜色为蓝色。
代码清单19-5 first-letter伪元素选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>first-letter伪元素使用示例</title>
<style type="text/css">
p:first-letter{color:#0000FF}
</style>
</head>
<body>
<p>This is an english text。</p>
<p>这是一段中文文字。</p>
</body>
</html>
这段代码的运行结果如图19-7所示。
（3）before伪元素选择器
before伪元素选择器用于在某个元素之前插入一些内容，使用方法如下所示。
// 可以插入一段文字
<元素〉：before
{
content：插入文字
}
// 也可以插入其他内容
<元素〉：before
{
content：url(test.wav)
}
代码清单19-6是before伪元素选择器的一个使用示例，在该示例中有一个ul列表，该列表中有几个li列表项目，使用before伪元素选择器在每个列表项目的文字的开头插入“·”字符。
代码清单19-6 before伪元素选择器的使用示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>before伪元素选择器使用示例</title>
<style type="text/css">
li:before{content: ·}
</style>
</head>
<body>
<ul>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
<li>列表项目5</li>
</li>
</ul>
</body>
</html>
这段代码的运行结果如图19-8所示。
（4）after伪元素选择器
after伪元素选择器用于在某个元素之后插入一些内容，使用方法如下所示。
<元素>：after
{
content：插入文字
}
// 也可以插入其他内容
<元素>：after
{
content：url(test.wav)
}
代码清单19-7是after伪元素选择器的一个使用示例，在该示例中有一个ul列表，这个ul列表的内容为某个网站上播放电影的节目清单。该列表中有几个列表项目，每个列表项目中存放了对于某部电影的超链接，使用after伪元素选择器在每个超链接的后面加入“（仅用于测试，请勿用于商业用途。）”的文字，并且将文字颜色设为红色。
代码清单19-7 after伪元素选择器的使用示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>after伪元素选择器使用示例</title>
<style type="text/css">
li:after{
content: "(仅用于测试，请勿用于商业用途。)";
font-size:12px;
color:red;
}
</style>
</head>
<body>
<h1>电影清单</h1>
<ul>
<li><a href="movie1.mp4">狄仁杰之通天帝国</a></li>
<li><a href="movie2.mp4">精武风云</a></li>
<li><a href="movie3.mp4">大笑江湖</a></li>
</ul>
</body>
</html>
这段代码的运行结果如图19-9所示。
