设置首字母样式

第一个伪元素用于设置一个块级元素首字母的样式，而且仅对该首字母设置样式：

p:first-letter {color: red;}

这个规则会把毎一段的第一个字母变成红色。或者，如果让每个h2中第一个字母的大小是标题中其余字母大小的两倍：

h2:first-letter {font-size: 200%;}

前面提到过，这个规则会导致用户代理对一个假想的元素作出响应，这个假想元素包含每个h2中的第一个字母。可能如下所示：

<h2><h2:first-letter>T</h2:first-letter>his is an h2 element</h2>

:first-letter样式只应用到上例所示假想元素的内容。这个<h2:first:-letter>元素并不出现在设计网页的文档源代码中。相反，它是由用户代理动态构造的，用于向相应文本块应用：first-letter样式。换句话说，<h2:first-letter>是一个伪元素。要记住，不必增加任何新标记。这会由网页浏览器完成。

设置第一行的样式

类似地，：first-line可以用来影响元素中第一个文本行。例如，可以让一个文档中第一段的第一行变成紫色：

p:first-line {color: purple;}

这个样式应用于每一段所显示的第一行文本。不论显示区域多大或多小，都是如此。如果第一行只包含该段的5个词，那么只有这5个词会变成紫色。如果第一行包含了元素的前30个词，那么所有这30个词都会是紫色。

由于从“This”到“only”的文本都应当是紫色，所以网页浏览器使用了一个假想标记，如下所示：

<p><p:first-line>This is a paragraph of text that has only</p: first-line>

one stylesheet applied to it. That style

causes the first line to be purple. No other…

如果第一行文本编辑为只包含这一段的前7个词，那么假想的</p:first-line>会前移，出现在“that”后面。

:first-letter 和:first-line 的限制

在CSS2中，：firsti-letter和：first-line伪元素只能应用于标记或段落之类的块级元素，而不能应用于超链接等的行内元素。在CSS2.1中，:first-letter能应用到所有元素。不过能应用：first-line和：first-letter的CSS属性还是有一些限制。表2-4显示了这些限制。

设置之前和之后元素的样式

假设想设置一种排版效果，在每个h2元素前加一对银色中括号：

h2:before {content:color: silver;}

CSS2.1允许插入生成的内容，然后使用伪元素：before和：after直接设置样式。图 2-27给出了一个例子。

伪元素用于插入生成的内容，并设置其样式。要在一个元素后面插入内容，可以使用伪元素：after。可以在文档的最后用一个适当的结束语结束：

body:after {content:" The End.";}

所生成的内容是一个单独的主体，有关内容（包括：before和:after的更多信息）将在以后更全面地介绍。

小结

通过根据设计网页中文档的语言来使用选择器，网页设计师可以创建丰富的CSS规则。我们可以构建只应用于少数元素的简单规则，对大量类似元素应用样式也同样简单。由于可以对选择器和规则分组，这使得样式表相当简洁，而且非常灵活，相应地可以缩小文件的大小，缩短下载时间。

网页浏览器通常必须慎用选择器，因为如果不能正确地解释选择器，会导致用户代理根本无法使用CSS。另一方面，网页设计师要正确地编写选择器，这很关键，因为一旦有错误，用户代理将不能按预想的那样应用样式。要想正确地理解选择器以及如何组合选择器，需要深入地掌握选择器与文档结构的关系，并了解继承和层叠等机制在确定如何为元素设置样式时有怎样的作用。这正是以后要讨论的内容。