1.CSS元素选择器
（1）CSS元素选择器
最常见的CSS选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。如果设置HTML的样式，选择器通常将是某个HTML元素，比如p、h1、em、a，甚至可以是html本身：
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
（2）类型选择器
在W3C标准中，元素选择器又称为类型选择器（type selector）。“类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。”下面的规则匹配文档树中所有h1元素：h1 {font-family: sans-serif;}
因此，我们也可以为 XML 文档中的元素设置样式：
2.CSS分组-通配符选择器
（1）选择器分组
假设希望h2元素和段落都有灰色。为达到这个目的，最容易的做法是使用以下声明：h2, p {color:gray;}
①将h2和p选择器放在规则左边，然后用逗号分隔，就定义了一个规则。其右边的样式（color:gray;）将应用到这两个选择器所引用的元素。逗号告诉浏览器，规则中包含两个不同的选择器。如果没有这个逗号，那么规则的含义将完全不同。
②可以将任意多个选择器分组在一起，对此没有任何限制。例如，如果您想把很多元素显示为灰色，可以使用类似如下的规则：body, h2, p, table, th, td, pre, strong, em {color:gray;}
③通过分组，可以将某些类型的样式“压缩”在一起，这样就可以得到更简洁的样式表。
（2）通配符选择器
CSS2引入了一种新的简单选择器 - 通配选择器（universal selector），显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符。
例如，可以使文档中的每个元素都为红色：* {color:red;}
这个声明等价于列出了文档中所有元素的一个分组选择器。利用通配选择器，只需敲一次键（仅一个星号）就能使文档中所有元素的color属性值指定为red。
（3）声明分组
可以对选择器进行分组，也可以对声明分组。假设您希望所有h1元素都有红色背景，并使用28像素高的Verdana字体显示为蓝色文本，可以写以下样式：
h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}
但是上面这种做法的效率并不高。尤其是为一个有多个样式的元素创建这样一个列表时会很麻烦。相反，我们可以将声明分组在一起：h1 {font: 28px Verdana; color: white; background: black;}这与前面的3行样式表的效果完全相同。
对声明分组，一定要在各个声明的最后使用分号，这很重要。浏览器会忽略样式表中的空白符。只要加了分号，就可以毫无顾忌地采用以下格式建立样式：
h1 {
font: 28px Verdana;
color: blue;
background: red;
}
不过，如果忽略了第二个分号，用户代理就会把这个样式表解释如下：
h1 {
font: 28px Verdana;
color: blue background: red;
}
因为background对color来说不是一个合法值，而且由于只能为color指定一个关键字，所以用户代理会完全忽略这个color声明（包括 background: black 部分）。这样h1标题只会显示为蓝色，而没有红色背景，不过更有可能根本得不到蓝色的 h1。相反，这些标题只会显示为默认颜色（通常是黑色），而且根本没有背景色。font: 28px Verdana 声明仍能正常发挥作用，因为它确实正确地以一个分号结尾。
与选择器分组一样，声明分组也是一种便利的方法，可以缩短样式表，使之更清晰，也更易维护。在规则的最后一个声明后也加上分号是一个好习惯。在向规则增加另一个声明时，就不必担心忘记再插入一个分号。
（4）结合选择器和声明的分组
我们可以在一个规则中结合选择器分组和声明分组，就可以使用很少的语句定义相对复杂的样式。
h1, h2, h3, h4, h5, h6 {
color:gray;
background: white;
padding: 10px;
border: 1px solid black;
font-family: Verdana;
}
3.CSS类选择器
类选择器允许以一种独立于文档元素的方式来指定样式。
（1）CSS类选择器
类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。只有适当地标记文档后，才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。
（2）修改HTML代码-类选择器与通配符选择器结合使用
在使用类选择器之前，需要修改具体的文档标记，以便类选择器正常工作。为了将类选择器的样式与元素关联，必须将class指定为一个适当的值。请看下面的 HTML 代码：
<h1 class="important">
This heading is very important.
</h1>
<p class="important">
This paragraph is very important.
</p>
在上面的代码中，两个元素的class都指定为important：第一个标题（h1元素），第二个段落（p元素）。
然后我们使用以下语法向这些归类的元素应用样式，即类名前有一个点号（.），然后结合通配选择器：*.important {color:red;}
如果您只想选择所有类名相同的元素，可以在类选择器中忽略通配选择器，这没有任何不好的影响：.important {color:red;}
（3）结合元素选择器
①类选择器可以结合元素选择器来使用。例如，您可能希望只有段落显示为红色文本：p.important {color:red;}
选择器现在会匹配class属性包含important的所有p元素，但是其他任何类型的元素都不匹配，不论是否有此class属性。选择器p.important 解释为：“其class属性值为important的所有段落”。 因为h1元素不是段落，这个规则的选择器与之不匹配，因此h1元素不会变成红色文本。
②如果你确实希望为h1元素指定不同的样式，可以使用选择器 h1.important：
p.important {color:red;}
h1.important {color:blue;}
（4）CSS多类选择器
①在HTML中，一个class值中可能包含一个词列表，各个词之间用空格分隔。例如，如果希望将一个特定的元素同时标记为重要（important）和警告（warning），就可以写作：
<p class="important warning">
This paragraph is a very important warning.
</p>
这两个词的顺序无关紧要，写成 warning important 也可以。
②假设class为important的所有元素都是粗体，而class为 warning 的所有元素为斜体，class 中同时包含important和warning的所有元素还有一个银色的背景 。就可以写作：
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
③通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。请看下面的规则：
.important.urgent {background:silver;}
不出所料，这个选择器将只匹配class属性中包含词important和urgent的p元素。因此，如果一个p元素的class属性中只有词important和 warning，将不能匹配。不过，它能匹配以下元素：
<p class="important urgent warning">
This paragraph is a very important and urgent warning.
</p>
重要事项：在IE7之前的版本中，不同平台的Internet Explorer都不能正确地处理多类选择器。
4.CSS ID选择器
（1）ID选择器与类选择器的区别
ID选择器允许以一种独立于文档元素的方式来指定样式。在某些方面，ID选择器类似于类选择器，不过也有一些重要差别。
①ID选择器前面有一个#号 - 也称为棋盘号或井号。*#intro {font-weight:bold;}，与类选择器一样，ID选择器中可以忽略通配选择器。前面的例子也可以写作：#intro {font-weight:bold;}
②ID选择器不引用class属性的值，毫无疑问，它要引用id属性中的值。<p id="intro">This is a paragraph of introduction.</p>
（2）类选择器还是ID选择器？
可以为任意多个元素指定类。类
还可以应用到更多元素。
区别1：只能在文档中使用一次
与类不同，在一个HTML文档中，ID选择器会使用一次，而且仅一次。
区别2：不能使用ID词列表
不同于类选择器，ID选择器不能结合使用，因为ID属性不允许有以空格分隔的词列表。
区别3：ID能包含更多含义
类似于类，可以独立于元素来选择ID。有些情况下，文档中会出现某个特定ID值，但是并不知道它会出现在哪个元素上，所以想声明独立的ID选择器。例如，您可能知道在一个给定的文档中会有一个ID值为mostImportant的元素。您不知道这个最重要的东西是一个段落、一个短语、一个列表项还是一个小节标题。您只知道每个文档都会有这么一个最重要的内容，它可能在任何元素中，而且只能出现一个。在这种情况下，可以编写如下规则：#mostImportant {color:red; background:yellow;}
这个规则会与以下各个元素匹配（这些元素不能在同一个文档中同时出现，因为它们都有相同的ID值）：
<h1 id="mostImportant">This is important!</h1>
<em id="mostImportant">This is important!</em>
<ul id="mostImportant">This is important!</ul>
（3）区分大小写
类选择器和ID选择器可能是区分大小写的。这取决于文档的语言。HTML和XHTML将类和ID值定义为区分大小写，所以类和ID值的大小写必须与文档中的相应值匹配。因此，对于以下的 CSS 和 HTML，元素不会变成粗体：#intro {font-weight:bold;}
<p id="Intro">This is a paragraph of introduction.</p>
由于字母i的大小写不同，所以选择器不会匹配上面的元素。
5.CSS属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。
（1）根据属性选择
如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。
例子1：把包含标题（title）的所有元素变为红色，可以写作：*[title] {color:red;}
例子2：对有href属性的锚（a 元素）应用样式：a[href] {color:red;}
例子3：根据多个属性进行选择，只需将属性选择器链接在一起即可。例如，将同时有href和title属性的HTML超链接的文本设置为红色，可以这样写：a[href][title] {color:red;}
例子4：可以采用一些创造性的方法使用这个特性。对所有带有alt属性的图像应用样式，从而突出显示这些有效的图像：img[alt] {border: 5px solid red;}，这个特例更适合用来诊断而不是设计，即用来确定图像是否确实有效。
例子5：假设我们为描述太阳系行星设计了一个XML文档。如果我们想选择有moons属性的所有planet元素，使之显示为红色，以便能更关注有moons的行星，就可以这样写：planet[moons] {color:red;}
为XML文档使用属性选择器，属性选择器在XML文档中相当有用，因为XML语言主张要针对元素和属性的用途指定元素名和属性名。
（2）根据具体属性值选择
除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。
例子1：将指向Web服务器上某个指定文档的超链接变成红色，可以这样写：a[href="https://www.bailong.org.cn/about"] {color: red;}
例子2：与简单属性选择器类似，可以把多个属性-值选择器链接在一起来选择一个文档。a[href="https://www.bailong.org.cn/"][title="W3School"] {color: red;}
例子3：同样地，XML语言也可以利用这种方法来设置样式。planet[moons="1"] {color: red;}
这种格式要求必须与属性值完全匹配。如果属性值包含用空格分隔的值列表，匹配就可能出问题。
<p class="important warning">This paragraph is a very important warning.</p>
如果写成 p[class="important"]，那么这个规则不能匹配示例标记。
要根据具体属性值来选择该元素，必须这样写：p[class="important warning"] {color: red;}
（3）根据部分属性值选择
如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。
①选择class属性中包含important的元素，可以这样写：p[class~="important"] {color: red;}，如果忽略了波浪号，则说明需要完成完全值匹配。
②部分值属性选择器与点号类名记法的区别
该选择器等价于我们在类选择器中讨论过的点号类名记法。即：p.important和p[class="important"]应用到HTML文档时是等价的。
③为什么还要有"~="属性选择器呢？因为它能用于任何属性，而不只是class。例如，可以有一个包含大量图像的文档，其中只有一部分是图片。对此，可以使用一个基于title文档的部分属性选择器，只选择这些图片：
img[title~="Figure"] {border: 1px solid gray;}
这个规则会选择title文本包含"Figure"的所有图像。没有title属性或者title属性中不包含"Figure"的图像都不会匹配。
③子串匹配属性选择器
类型 描述
[abc^="def"] 选择abc属性值以"def"开头的所有元素
[abc$="def"] 选择abc属性值以"def"结尾的所有元素
[abc*="def"] 选择abc属性值中包含子串"def"的所有元素
对指向bailong的所有链接应用样式，不必为所有这些链接指定class，再根据这个类编写样式，而只需编写以下规则：a[href*="bailong.org.cn"] {color: red;}
提示：任何属性都可以使用这些选择器。
（4）特定属性选择类型
①选择lang属性等于en或以en-开头的所有元素：*[lang|="en"] {color: red;}
因此，以下示例标记中的前三个元素将被选中，而不会选择后两个元素：
<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>
一般来说，[att|="val"] 可以用于任何属性及其值。
②假设一个HTML文档中有一系列图片，其中每个图片的文件名都形如figure-1.jpg和figure-2.jpg。就可以使用以下选择器匹配所有这些图像：img[src|="figure"] {border: 1px solid gray;}，当然，这种属性选择器最常见的用途还是匹配语言值。
（5）CSS选择器参考手册
选择器 描述
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。
6.CSS后代选择器
后代选择器（descendant selector）又称为包含选择器。后代选择器可以选择作为某元素后代的元素。
（1）根据上下文选择元素
可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。
如果您希望只对h1元素中的em元素应用样式，可以这样写：h1 em {color:red;}
上面这个规则会把作为h1元素后代的em元素的文本变为红色。其他em文本（如段落或块引用中的 em）则不会被这个规则选中。当然，也可以在h1中找到的每个em元素上放一个class属性，但是显然，后代选择器的效率更高。
（2）语法解释
在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”，但是要求必须从右向左读选择器。
因此，h1 em选择器可以解释为 “作为h1元素后代的任何em元素”。如果要从左向右读选择器，可以换成以下说法：“包含em的所有h1会把以下样式应用到该em”。
（3）具体应用
①后代选择器的功能极其强大。有了它，可以使HTML中不可能实现的任务成为可能。
假设有一个文档，其中有一个边栏，还有一个主区。边栏的背景为蓝色，主区的背景为白色，这两个区都包含链接列表。不能把所有链接都设置为蓝色，因为这样一来边栏中的蓝色链接都无法看到。
解决方法是使用后代选择器。在这种情况下，可以为包含边栏的div指定值 sidebar的class属性，并把主区的class属性值设置为maincontent。然后编写以下样式：
div.sidebar {background:blue;}
div.maincontent {background:white;}
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}
②有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。
例如，如果写作ul em，这个语法就会选择从ul元素继承的所有em元素，而不论em的嵌套层次多深。因此，ul em将会选择以下标记中的所有em元素：
<ul>
<li>List item 1
<ol>
<li>List item 1-1</li>
<li>List item 1-2</li>
<li>List item 1-3
<ol>
<li>List item 1-3-1</li>
<li>List item <em>1-3-2</em></li>
<li>List item 1-3-3</li>
</ol>
</li>
<li>List item 1-4</li>
</ol>
</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
7.CSS子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
（1）选择子元素
如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。例如，如果您希望选择只作为h1元素子元素的strong 元素，可以这样写：h1 > strong {color:red;}
这个规则会把第一个h1下面的两个strong元素变为红色，但是第二个h1中的strong不受影响：
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
（2）语法解释
子选择器使用了大于号（子结合符）。子结合符两边可以有空白符，这是可选的。因此，以下写法都没有问题：
h1 > strong
h1> strong
h1 >strong
h1>strong
如果从右向左读，选择器 h1 > strong可以解释为“选择作为h1元素子元素的所有strong元素”。
（3）结合后代选择器和子选择器
table.company td > p
上面的选择器会选择作为td元素子元素的所有p元素，这个td元素本身从table元素继承，该table元素有一个包含company的class属性。
8.CSS相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
（1）选择相邻兄弟
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
例如，如果要增加紧接在h1元素后出现的段落的上边距，可以这样写：h1 + p {margin-top:50px;}
这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。
（2）语法解释
相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）。与子结合符一样，相邻兄弟结合符旁边可以有空白符。
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>
在上面的片段中，div元素中包含两个列表：一个无序列表，一个有序列表，每个列表都包含三个列表项。这两个列表是相邻兄弟，列表项本身也是相邻兄弟。不过，第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟，因为这两组列表项不属于同一父元素（最多只能算堂兄弟）。用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器：
li + li {font-weight:bold;}
上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。
（3）结合其他选择器
相邻兄弟结合符还可以结合其他结合符：html > body table + ul {margin-top:20px;}
这个选择器解释为：选择紧接在table元素后出现的所有兄弟ul元素，该table元素包含在一个body元素中，body元素本身是html元素的子元素。
9.CSS伪类(Pseudo-classes)
（1）伪类的语法
selector : pseudo-class {property: value}CSS类也可与伪类搭配使用。
selector.class : pseudo-class {property: value}锚伪类
在支持CSS的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
①在CSS定义中，a:hover必须被置于a:link和a:visited之后，才是有效的。
②在CSS定义中，a:active 必须被置于a:hover之后，才是有效的。
③伪类名称对大小写不敏感。
（2）伪类与CSS类
伪类可以与CSS类配合使用：a.red : visited {color: #FF0000}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
假如上面的例子中的链接被访问过，那么它将显示为红色。
（3）CSS2 - :first-child伪类
可以使用:first-child伪类来选择元素的第一个子元素。这个特定伪类很容易遭到误解，所以有必要举例来说明。考虑以下标记：
<div>
<p>These are the necessary steps:</p>
<ul>
<li>Intert Key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
</div>
①在上面的例子中，作为第一个元素的元素包括第一个p、第一个li和strong和em元素。给定以下规则：
p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}
第一个规则将作为某元素第一个子元素的所有p元素设置为粗体。
第二个规则将作为某个元素（在HTML中，这肯定是ol或ul元素）第一个子元素的所有li元素变成大写。
❶最常见的错误是认为p:first-child之类的选择器会选择p元素的第一个子元素。
❷必须声明 <!DOCTYPE>，这样:first-child才能在IE中生效。
②为了使您更透彻地理解:first-child伪类，我们另外提供了3个例子：
例子1 - 匹配第一个<p>元素：选择器匹配作为任何元素的第一个子元素的 p 元素：
<html>
<head>
<style type="text/css">
p:first-child {
color: red;
}
</style>
</head>
<body>
<p>some text</p>
<p>some text</p>
</body>
</html>
例子 2 - 匹配所有<p>元素中的第一个<i>元素：选择器匹配所有<p>元素中的第一个<i>元素：
<html>
<head>
<style type="text/css">
p > i:first-child {
font-weight:bold;
}
</style>
</head>
<body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
</html>
例子 3 - 匹配所有作为第一个子元素的 <p> 元素中的所有 <i> 元素：
<html>
<head>
<style type="text/css">
p:first-child i {
color:blue;
}
</style>
</head>
<body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
</html>
（4）CSS2 - :lang 伪类
:lang伪类使你有能力为不同的语言定义特殊的规则。:lang类为属性值为no的q元素定义引号的类型：
<html>
<head>
<style type="text/css">
q:lang(no)
{
quotes: "~" "~"
}
</style>
</head>
<body>
<p>文字<q lang="no">段落中的引用的文字</q>文字</p>
</body>
</html>
（5）超链接 - :focus的使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
input:focus
{
background-color:yellow;
}
</style>
</head>
<body>
<form action="form_action.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
</form>
<p><b>注释：</b>如果已规定!DOCTYPE，那么Internet Explorer 8（以及更高版本）支持:focus 伪类。</p>
</body>
</html>
（6）属性 描述 CSS
:active 向被激活的元素添加样式。 1
:focus 向拥有键盘输入焦点的元素添加样式。 2
:hover 当鼠标悬浮在元素上方时，向元素添加样式。 1
:link 向未被访问的链接添加样式。 1
:visited 向已被访问的链接添加样式。 1
:first-child 向元素的第一个子元素添加样式。 2
:lang 向带有指定 lang 属性的元素添加样式。
10.CSS伪元素(Pseudo-elements)
CSS伪元素用于向某些选择器设置特殊效果。伪元素的语法：
selector:pseudo-element {property:value;}
CSS类也可以与伪元素配合使用：
selector.class:pseudo-element {property:value;}
（1）:first-line伪元素
"first-line" 伪元素用于向文本的首行设置特殊样式。
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
①"first-line" 伪元素只能用于块级元素。
②下面的属性可应用于"first-line"伪元素：font、color、background、word-spacing、letter-spacing、text-decoration、vertical-align、text-transform、line-height、clear。
（2）:first-letter 伪元素
"first-letter" 伪元素用于向文本的首字母设置特殊样式：
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
①first-letter" 伪元素只能用于块级元素。
②下面的属性可应用于 "first-letter" 伪元素：font、color、background、margin、padding、border、text-decoration、vertical-align (仅当 float 为 none 时)、text-transform、line-height、float、clear、
（3）伪元素和CSS类
伪元素可以与CSS类配合使用：
p.article:first-letter
{
color: #FF0000;
}
<p class="article">This is a paragraph in an article。</p>，使所有class为article的段落的首字母变为红色。
（4）多重伪元素
可以结合多个伪元素来使用。在下面的例子中，段落的第一个字母将显示为红色，其字体大小为xx-large。第一行中的其余文本将为蓝色，并以小型大写字母显示。段落中的其余文本将以默认字体大小和颜色来显示：
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}
（5）CSS2 - :before 伪元素
":before" 伪元素可以在元素的内容前面插入新内容。在每个<h1>元素前面插入一幅图片：
h1:before
{
content:url(logo.gif);
}
（6）CSS2 - :after 伪元素
":after" 伪元素可以在元素的内容之后插入新内容。在每个<h1>元素后面插入一幅图片：
h1:after
{
content:url(logo.gif);
}
伪元素属性 描述 CSS
:first-letter 向文本的第一个字母添加特殊样式。 1
:first-line 向文本的首行添加特殊样式。 1
:before 在元素之前添加内容。 2
:after 在元素之后添加内容。