19.3 结构性伪类选择器
本节介绍CSS 3中的结构性伪类选择器，在介绍结构性伪类选择器之前，先来介绍一下CSS中的伪类选择器及伪元素。
19.3.1 CSS中的伪类选择器及伪元素（1）
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>
（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-6所示
图19-6 first-line伪元素使用示例
相关HTML 5与CSS 3权威指南：CSS中的伪类选择器及伪元素（1）