模式	意义	具体说明小节
*	匹配任意元素。	全局选择器
E	匹配任意的E元素（即，类型为E的元素）。	类型选择器
E F	匹配任意一个位于某个E 元素内部（ descendant, 后代，不严格要求是直接后代）的F 元素。	后代选择器
E > F	匹配任意一个是某个E 元素的子代（child,直接后代）的F 元素。	子代选择器
E:first-child	如果E 是它的直接亲代元素的第一个子代元素，则匹配元素E。	:first-child 伪类
E:link E:visited	如果E是某个超链接的源锚元素，并且其目标网址还未被访问（:link）或者已被访问（:visited），则匹配元素 E 。	链接伪类
E:active E:hover E:focus	在特定的用户动作过程中，匹配E。	动态伪类
E:lang(c)	如果E的（人类）语言是 c （文档语言里会指定如何确定自然语言的规则），则匹配类型 E 的元素。	:lang() 伪类
E + F	匹配任意的直接位于一个相邻（sibling，同级别） E 元素之后的 F 元素。	相邻选择器
E[foo]	匹配任意的设置了"foo"属性（其值随意）的 E 元素。	属性选择器
E[foo="warning"]	匹配任意的其"foo"属性的值严格等于"warning"的 E 元素。	属性选择器
E[foo~="warning"]	匹配任意的其"foo"属性的值是一个由空格分隔的值组成的列表，并且其中某个值严格等于"warning"的 E 元素。	属性选择器
E[lang\|="en"]	匹配任意的满足此条件的E元素：其"lang"属性是一组由连字符分隔的列表，并且第一个值（从左边开始）是"en"。	属性选择器
DIV.warning	与语言相关。 (在超文本标记语言中，与DIV[class~="warning"]等价。)	类选择器
E#myid	匹配任意的其标识（ID）为"myid"的E元素。	标识选择器

5.2 选择器语法

一个简单的选择器可以是一个类型选择器或全局选择器，其后再以任意顺序跟着0个或多个属性选择器、标识选择器或伪类。如果它的所有部分都匹配，则该简单选择器匹配成功。

注意：层叠样式单2.1 版本中使用的术语跟层叠样式单 3 版本中使用的术语不同。例如，在层叠样式单3中， “简单选择器”指的是一个选择器中的某个小部分。参考层叠样式单3 中的选择器模块 [CSS3SEL] 。

一个选择器由单个或多个简单选择器组成，它们之间通过组合符分隔开。组合符包括：空白、">"和"+"。并且，空白可以出现在组合符和简单选择器之间。

文档树中匹配某个选择器的元素，被称作该选择器的主题（ subjects ）。由单个简单选择器组成的选择器，可匹配任意符合其条件的元素。在选择器的前面加上一个简单选择器及其组合符之后，就会引入额外的限制条件，所以，某个选择器的主题，一定是其最后一个简单选择器匹配的元素集合中的子集。

可向选择器中的最后一个简单选择器里追加一个伪元素，那种情况下，样式信息就只会应用到主题中的一部分元素上。

5.2.1 分组（Grouping）

当多个选择器共享同一个声明时，可使用逗号来将它们分组到一起，形成列表。

在以下示例中，我们将三个带有完全一致的声明的规则浓缩成一个。所以，

h1 { font-family: sans-serif }

h2 { font-family: sans-serif }

h3 { font-family: sans-serif }

等价于：

h1, h2, h3 { font-family: sans-serif }

层叠样式单还提供了其它的“缩写”机制，包括多个声明和缩写属性。

5.3 全局选择器

全局选择器，写作"*"，匹配任意元素类型的名字。它会匹配文档树中的任意单个元素。

如果全局选择器并非是某个简单选择器中的唯一组件，则"*"可被省略。例如：

•. *[lang=fr] 与 [lang=fr] 是等价的。
•. *.warning 与 .warning 是等价的。
•. *#myid 与 #myid 是等价的。

5.4 类型选择器

类型选择器匹配的是单个的文档语言元素类型的名字。一个类型选择器可匹配文档树中该元素类型的所有实例。

以下示例匹配文档树中所有的H1 元素：

h1 { font-family: sans-serif }

5.5 后代选择器

有些时候，网页作者们会想要选择器能够匹配文档树中属于另一个元素的后代的某个元素（例如，"匹配那些被包含在一个 H1 元素中的 EM 元素 "）。后代选择器就是用来表达这种模式关系的。后代选择器由两个或更多选择器组成，之间用空白隔开。一个形为" A B "的后代选择器，会在某个元素 B 是某个祖先元素 A 的任意后代时，匹配成功。

例如，看一下以下规则：

h1 { color: red }

em { color: red }

尽管这些规则的原意是要通过改变颜色来起到强调作用，但是在以下情形中会失效：

<H1>This headline is <EM>very</EM> important</H1>

我们需要如此处理这种情形：向这前的规则里面增加一条规则，当EM 在H1 里任何位置出现时，将颜色设置成蓝色。

h1 { color: red }

em { color: red }

h1 em { color: blue }

第三条规则会匹配以下代码块里的EM：

<H1>This <SPAN class="myclass">headline

is <EM>very</EM> important</SPAN></H1>

以下选择器：

div * p

匹配是的一个满足以下条件的P 元素：是某个DIV 元素的孙子（grandchild）或更后的后代。注意，"*"两边的空白，并不是全局选择器的一部分；空白是组合符，表示的是，DIV 必须是某个元素的祖先，而那个元素又必须是 P 的某个祖先。

以下规则中，同时使用了后代选择器和属性选择器，匹配的是满足以下条件的元素：(1)设置了"href"属性；(2)位于一个P中，而此P又位于一个DIV 中：

div p *[href]

5.6 子代选择器

子代选择器，当某个元素是另一个元素的子代时匹配成功。子代选择器由两个或多个选择器组成，之间用">"分隔。

以下规则，会设置所有是 BODY 的子代的 P 元素的样式：

body > P { line-height: 1.3 }

以下示例同时使用了后代选择器和子代选择器：

div ol>li p

它匹配的是一个P元素，这个P元素是某个LI 的后代；该LI元素必须是某个OL 元素的子代；该OL元素又必须是某个DIV 的后代。注意，">"组合符两边的空白是可选的，这里就省略掉了。

参考下面的 :first-child 伪类，以了解如何选择某个元素的第一个子代元素。

5.7 相邻同级选择器

相邻同级选择器的语法是这样的：E1 + E2，此时E2 即为此选择器的主题。在以下条件下匹配成功：E1 和E2 在文档树中共享同一个亲代元素，并且E1 后面是紧跟着E2，此处会忽略非元素节点（例如文本节点和注释）。

所以，以下规则的意思就是，当某个P元素直接跟在一个MATH 元素之后时，它不应当被缩进：

math + p { text-indent: 0 }

下一个示例，当H2 直接跟在H1 之后时，减少二者之间竖直方向的空白：

h1 + h2 { margin-top: -5mm }

接下来的这个规则类似之前的示例，只不过它增加了一个类选择器。所以，仅仅当H1 拥有 class="opener" 属性时，才会应用这里的特殊格式：

h1.opener + h2 { margin-top: -5mm }

5.8 属性选择器

层叠样式单2.1 版本，允许网页写手匹配那些在源文档里定义了特定属性的元素。

5.8.1 匹配属性和属性值

属性选择器可通过4种方式来匹配：

[att]

当元素设置了"att"属性时匹配，不在乎该属性具体是什么值。

[att=val]

当元素的"att"属性严格等于"val"时匹配。

[att~=val]

匹配的是这样的元素，其 att 属性的值是一组由空白分隔的词语，而其中某个词语严格等于"val"。如果"val" 中包含空白的话，不会匹配任何东西(因为那些词语就是用空白分隔的 )。如果"val" 是空字符串，则同样不会匹配任何东西。

[att|=val]

匹配的是这样的元素，其 att 属性的值严格等于"val"，或者以"val"开头，后面立即跟一个"-" (U+002D)。这个主要是用来允许进行语言子代码的匹配（例如，超文本标记语言中， a 元素的 hreflang 属性），具体是在BCP 47 ( [BCP47] )及其后继文档里说明的。对于 lang (或 xml:lang)这个东西的语言子代码匹配，参考 :lang 伪类。

属性值必须是标识符（identifiers）或字符串。选择器中的属性名字及值的大小写敏感性取决于文档语言。

例如，以下属性选择器匹配的是所有设置了"title"属性的H1 元素，无论其具体值是什么：

h1[title] { color: blue; }

以下示例中，选择器匹配的是所有其"class"属性严格等于"example"的SPAN 元素：

span[class=example] { color: blue; }

可同时使用多个属性选择器来引用某个元素的多个属性，甚至多次引用同个属性。

此示例中，选择器匹配的是：所有其"hello"属性严格等于"Cleveland"，并且其"goodbye"属性严格等于"Columbus"的SPAN 元素：

span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }

以下选择器展示了"="和"~="之间的不同。第一个选择器，当"rel"属性的值为"copyright copyleft copyeditor"时也会匹配。第二个选择器，只有当"href"属性的值严格等于"http://www.w3.org/"时才会匹配。

a[rel~="copyright"]

a[href="http://www.w3.org/"]

以下规则，将所有其"lang"属性的值为"fr"（即，语言为法国语）的元素都隐藏。

*[lang=fr] { display : none }

以下规则，会匹配那些"lang"属性的值以"en"开头的元素，包括"en"、"en-US"和"en-cockney"：

*[lang|="en"] { color : red }

类似于，以下的听觉（aural）样式单规则，会使得剧本针对不同的角色以不同的声音来朗读：

DIALOGUE[character=romeo]

{ voice-family: "Laurence Olivier", charles, male }

DIALOGUE[character=juliet]

{ voice-family: "Vivien Leigh", victoria, female }

5.8.2 文件类型定义（DTDs）中的默认属性值

匹配动作是针对文档树中的属性值来进行的。默认属性值可能在文件类型定义或别的什么地方定义过，但不一定每次都会被属性选择器选中。样式单应当被仔细设计，以便当默认值没有出现在文档树中时仍然能正常工作。

更准确地说，一个浏览器可以，但并不是必须地，从文件类型定义中读取一个“外部子集”，但是，必须从文档的“内部子集”中读取默认属性值。（参考 [XML10] 以了解这些集合的定义。）取决于浏览器，定义于文件类型定义的外部子集中的默认属性值可能会出现，也可能不会出现于文档树中。

一个能识别可扩展标记语言命名空间 [XMLNAMESPACES] 的浏览器，可能会，但不是必须地，使用它对于该命名空间的知识来处理默认属性值，就好像它们真的就存在于文档中一样。（例如，一个可扩展超文本标记语言（）的浏览器并不被要求动用它内置的对于可扩展超文本标记语言的文件类型定义的知识。）

注意，一般情况下，浏览器都会无视外部子集的。

例如，考虑一个EXAMPLE 元素，它拥有一个"notation"属性，其默认值是"decimal"。对应的文件类型定义片段可能是

<!ATTLIST EXAMPLE notation (decimal,octal) "decimal">

如果样式单中包含以下规则

EXAMPLE[notation=decimal] { /*... 默认属性设置 ...*/ }

EXAMPLE[notation=octal] { /*... 其它设置...*/ }

那么，对于其"notation"属性为默认值（即，没有显式设置）的元素，不一定会匹配成功。要想捕捉到所有的情况，则针对默认值的属性选择器应当删除：

EXAMPLE { /*... 默认属性设置 ...*/ }

EXAMPLE[notation=octal] { /*... 其它设置...*/ }

这里， EXAMPLE[notation=octal] 这个选择器比单独的一个类型选择器更具体，所以，对于那些其"notation"属性值为"octal"的元素，第二条规则会覆盖第一条规则。需要特别注意，所以会在匹配默认情况时设置的属性声明都会被非默认情况下的样式规则覆盖。

5.8.3 类选择器

在写超文本标记语言时，如果想表示 class 属性，则网页写手可使用小数点( . )来代替 ~= 写法。所以，对于超文本标记语言， div.value 和 div[class~=value]具有相同的含义。属性值必须紧跟在“小数点 ”( . )之后。对于可扩展标记语言文档，如果浏览器有关于特定命名空间的知识，使得它能够确定哪个属性是"class"属性时，则可能会使用小数点(.)写法来应用选择器。这种关于命名空间的知识的一个例子就是，特定命名空间的规范中的散文（prose）（例如，可缩放矢量图形 1.1版本 [SVG11] 描述了可缩放矢量图形 "class"属性以及浏览器应当怎样解释它，类似的还有数学标记语言（ MathML ） 3.0 [MATH30] 描述了数学标记语言"class"属性。）

例如，可按照以下写法来给所有 class~="pastoral" 的元素赋予样式信息：

*.pastoral { color: green } /* 所有class~=pastoral 的元素 */

或直接这样写

.pastoral { color: green } /* 所有class~=pastoral 的元素 */

以下代码，只会给那些 class~="pastoral" 的H1 元素赋予样式信息：

H1.pastoral { color: green } /* class~=pastoral的H1 元素 */

按照上面的规则，下面的第一个H1 实例不会是绿色的，而第二个会是绿色的：

<H1>Not green</H1>

<H1 class="pastoral">Very green</H1>

要想匹配"class"值的一个子集的话，则应当在每个值前面带一个"."。

例如，以下规则匹配的是符合此条件的P元素：其"class"属性被赋予了一组由空白隔开的值，其中包括"pastoral"和"marine"：

p.marine.pastoral { color: green }

此规则会匹配 class="pastoral blue aqua marine" ，但不会匹配 class="pastoral blue" 。

注意。层叠样式单给"class"属性赋予了如此强大的能力，以至于网页写手们可以基于那些几乎不带任何固有外观样式的元素（例如超文本标记语言中的 DIV 和 SPAN）以及"class"属性来设计出他/她们自己的“文档语言”。写手们应当避免这种实践方式，因为文档语言中的结构化元素往往带有被普遍接受的特定意义，而作者自定义的类不具有这些含义。

注意：如果某个元素拥有多个类（ class ）属性，则在搜索类属性值之前，应当将那些值以空格连接起来。然而，到目前为止，工作组还找不到一种可让这种情况实现的方法，所以这个行为目前是明确确定为非标准的。

5.9 标识选择器

文档语言中可能会包含一些被声明为类型标识的属性。类型标识的特别之处在于，不会有两个元素的标识具有相同的值；无论是哪种文档语言，都可以用标识属性来唯一地确定一个元素。在超文本标记语言中，所有的标识属性的名字都是"id"；可扩展标记语言的程序中，可能会以不同的方式来命名标识属性，但是也会具有同样的限制。

文档语言中的标识属性使得开发人员可以为文档树中的单个元素实例赋予一个标识符。层叠样式单的标识选择器基于元素的标识符来匹配单个的元素实例。一个层叠样式单标识选择器包含一个"#"，随后紧跟着标识值，后者必须是一个有效的标识符。

注意，层叠样式单并不指定一个浏览器是如何确定一个元素的标识属性的。浏览器可能采用多种手段，例如：读取文档的文件类型定义、将此信息硬编码进代码中、或者直接询问用户。

以下标识选择器匹配的是其标识属性的值为"chapter1"的H1 元素：

h1#chapter1 { text-align: center }

以下示例中，样式规则匹配的是其标识属性为"z98y"的元素。因此，该规则会匹配 P 元素：

<HEAD>

<TITLE>Match P</TITLE>

*#z98y { letter-spacing: 0.3em }

</STYLE>

</HEAD>

<BODY>

</BODY>

然而，在下一个示例中，样式规则只会匹配一个其标识属性值为"z98y"的H1 元素。在这个示例中，规则不会匹配到其中的P元素：

<HEAD>

<TITLE>Match H1 only</TITLE>

H1#z98y { letter-spacing: 0.5em }

</STYLE>

</HEAD>

<BODY>

</BODY>

与属性选择器相比，标识选择器更精确。例如，在超文本标记语言中，对于层叠情况来说，选择器 #p123 比 [id=p123] 更精确。

注意。在可扩展标记语言 1.0 版本 [XML10] 中，关于哪个属性对应着一个元素的标识的信息是包含在文件类型定义中的。在解析可扩展标记语言文档时，浏览器不一定会去读取文件类型定义，因此不一定知道一个元素的标识是什么。如果样式单设计者明确知道或者担心实际情况会是这样的，那么他/她应当使用普通的属性选择器来代替： [name=p371] 而不是 #p371 。然而，普通属性选择器的层叠（cascading）顺序与标识选择器的顺序不同。可能有必要向声明中加入一个"!important"优先级： [name=p371] {color: red ! important} 。

如果某个元素拥有多个标识属性，那么所有的这些属性都应当被当成标识来处理，用来与标识选择器匹配。可通过混用xml:id [XMLID] 、文档对象模型 3内核 [DOM-LEVEL-3-CORE] 、可扩展标记语言文件类型定义 [XML10] 和命名空间相关的知识来达到这样一个效果。

5.10 伪元素和伪类

在层叠样式单2.1版本中，样式一般是根据元素在文档树中的位置来附加到元素上的。这种简单的模型，在狠多情形下是狠有效的，但是由于文档树的结构特点，某些常见的出版场景却无法实现。例如，在超文本标记语言 4 版本（参考 [HTML4] ）中，没有元素可表示一个段落的第一行，因此无法使用简单的层叠样式单选择器来表示它。

层叠样式单引入了伪元素和伪类的概念，来针对那些不处于文档树中的信息进行格式设置。

•. 伪元素基于那些超出文档语言的层次之上的信息来创建关于文档树的一些抽象。例如，文档语言不提供手段来访问一个元素的内容中的第一个字母或第一行。层叠样式单的伪元素就使得样式单设计者可以访问到这种以其它手段访问不到的信息。伪元素还使得样式单设计者可以向源文档中不存在的内容赋予样式信息（例如， :before 和 :after 伪元素使得程序猿可以访问到后期生成的内容）。
•. 伪类可按照元素的特征来识别元素，而不是按照名字、属性或内容；一般是指那些无法从文档树中提取的特征。伪类可能是动态的，也就是说，在用户与文档进行交互时，某个元素可能会获得或者失去一个伪类。例外就是： ':first-child' ，可以从文档树中提取到； ':lang()' ，在某些情况下可以从文档树中提取到。

伪元素和伪类都不会出现在文档源代码或文档树中。

伪类可在选择器中任何位置出现，而伪元素只能在选择器中最后一个简单选择器之后出现。

伪元素和伪类的名字都是大小写不敏感的。

某些伪类之间是互斥的，而其它伪类可以同时应用于同一个元素。遇到冲突的规则时，根据一般的层叠顺序来确定最终输出。

5.11 伪类

5.11.1 :first-child伪类

:first-child伪类匹配的是：本身是另一个元素的第一个子代元素的元素。

以下示例中，此选择器匹配的是任意一个是某个DIV 元素的第一个子代元素的 P 元素。此规则禁止了对于一个（DIV）的第一个段落的缩进：

div > p:first-child { text-indent: 0 }

此选择器，会匹配以下片段中位于DIV 里的那个 P ：

<P> The last P before the note.

<P> The first P inside the note.

</DIV>

但是，不是会匹配以下片段中的第二个P：

<P> The last P before the note.

<P> The first P inside the note.

</DIV>

以下规则，将任一个满足此条件的EM 元素的字体样式设置成“粗体”（'bold'）：它是某个P元素的后代，而那个P元素又是某个元素的第一个子代元素：

p:first-child em { font-weight : bold }

注意，匿名框对象并不算作文档树的一部分，所以在计数寻找第一个子代元素时，它们并不算在内。

例如，下面片段中的EM：

<P>abc <EM>default</EM>

是P的第一个子代元素。

以下两个选择器是等价的：

* > a:first-child /* A是任意元素的第一个子代元素 */

a:first-child /* 同样 */

5.11.2 链接伪类： :link和 :visited

浏览器通常都会以不同的样式来显示未访问的链接和已访问的链接。层叠样式单提供了伪类':link'和':visited'来区分它们：

•.:link伪类表示的是那些还未被访问的链接。
•.:visited伪类表示的是那些已经被用户访问过的链接。

在特定情况下，浏览器可能会将已经访问过的链接也当成（未访问的）':link'状态。

这两种状态是互斥的。

文档语言决定了什么元素是超链接的源锚点。例如，在超文本标记语言4中，链接的伪类对于拥有"href"属性的 A 元素有效。所以，以下两条层叠样式单2.1 声明的效果是相同的：

a:link { color: red }

:link { color: red }

如果以下这个链接：

<A class="external" href="http://out.side/">external link</A>

已经被访问过，则此规则：

a.external:visited { color: blue }

会使得它变成蓝色的。

注意。样式单设计者有可能滥用:link和:visited伪类，来在用户不知情的情况下伪装出某些网站已经被访问过，而有些网站没有被访问过。

因此，浏览器有可能会将所有链接都直接当成未访问的链接，或者采用自己的手段来以不同的样式渲染已访问和未访问的链接以确保用户的隐私。参考 [P3P] 以了解更多关于隐私处理的信息。

5.11.3 动态伪类： :hover、 :active和 :focus

交互式的浏览器有些时候会改变渲染状态以对用户的动作进行响应。层叠样式单针对通常的情况提供了三种伪类：

•.:hover伪类在用户指向（采用某种指针设备）某个元素而还没有激活它时起作用。例如，一个可视化的浏览器会在光标（鼠标指针）悬停在某个元素的矩形框上时应用这个伪类。不支持交互式媒体的浏览器无需支持这个伪类。某些符合标准的支持交互式媒体的浏览器也可能无法支持这个伪类（例如，一个笔设备）。
•.:active伪类在用户正在激活某个元素时起作用。例如，在用户按下及松开按钮之间的这段时间。
•.:focus伪类在某个元素拥有焦点时起作用（接受键盘事件或其它类型的文字输入）。

一个元素可能同时满足多种伪类条件。

层叠样式单并不定义哪些元素可以拥有以上状态，也不定义这些状态是如何进入及离开的。脚本可能会改变设置，使得元素对用户事件进行响应或者不响应，并且，不同的设备和浏览器可能会有不同的方式来指向及激活元素。

层叠样式单2.1版本并没有定义当某个元素处于':active'或':hover'状态时，其亲代元素是否也处于那个状态。

浏览器并不是必须因为伪类的状态变化而刷新显示当前文档。例如，某个样式单可能会指定一个处于激活（:active）状态的链接的字体大小（ 'font-size' ）比未激活的链接的要大，但是呢，由于这样可能会在用户选择链接时引起字母改变位置，所以浏览器可能会无视对应的样式单规则。

a:link { color: red } /* 未访问的链接 */

a:visited { color: blue } /* 已访问的链接 */

a:hover { color: yellow } /* 悬停 */

a:active { color: lime } /* 活跃链接 */

注意A:hover 必须放置在A:link 和A:visited 规则之后，因为，如果不这样做，层叠规则就会隐藏掉A:hover 规则的 'color' 属性。类似地，由于A:active 被放置在A:hover 之后，所以，当用户既激活也悬停于 A 元素的上方时，活跃状态的颜色（灰（ lime ））会起作用。

一个组合使用动态伪类的示例：

a:focus { background: yellow }

a:focus:hover { background: white }

最后一个选择器匹配的是同时处于伪类:focus和伪类:hover状态的A元素。

关于如何显示焦点轮廓的信息，请参考动态焦点轮廓小节。

注意。在层叠样式单1版本中， ':active' 伪类与':link'和':visited'是互斥的。现在不是这样的了。一个元素可以同时是':visited'和':active'的（或者':link' 和 ':active'），而通用的层叠规则会决定哪个样式声明最终起作用。

注意。另外还要注意，在层叠样式单1版本中， ':active' 伪类只对链接有效。

5.11.4 语言伪类 :lang

如果文档语言指明了如何确定一个元素的人类语言的话，那么就可以在层叠样式单中按照元素的语言来编写选择器。例如，在超文本标记语言 [HTML4] 中，语言由以下东西的组合来决定："lang"属性、META元素、另外还可能会用上协议里的信息（例如超文本传输协议（ HTTP ）的报头）。可扩展标记语言用的是一个叫作xml:lang 的属性，而其它文档语言可能会使用别的什么方式来确定语言。

当某个元素是使用语言 C 时，伪类':lang(C)'就匹配成功。是否匹配就取决于，标识 C或者是与元素的语言值相等，或者是元素的语言值中被连字符分隔的一个子字符串，就像是用 '|=' 操作符来匹配的一样。C与元素的语言值之间的比较是在美国标准信息交换码（ASCII）的范围内按照大小写不敏感的形式来进行的。标识C无需是一个有效的语言名字。

C不能为空。

注意：建议文档和协议使用BCP 47 [BCP47] 或其后继文档中的代码来表示语言，或者，对于基于可扩展标记语言的文档 [XML10] 使用"xml:lang"属性。参考 "常见问题：双字母或三字母的语言代码。 "

以下规则，为加拿大法语或德语的超文本标记语言文档设置对应的引用符号：

html:lang(fr-ca) { quotes: '« ' ' »' }

html:lang(de) { quotes: '»' '«' '\2039' '\203A' }

:lang(fr) > Q { quotes: '« ' ' »' }

:lang(de) > Q { quotes: '»' '«' '\2039' '\203A' }

事实上，第二对规则会根据Q元素的亲代元素的语言属性来设置 'quotes' 属性。这是因为，一般情况下，引用符号是基于引用文字块外围的元素的语言来选择的，而不是基于引用文字块本身：例如这一砣位于英语文字中的法国文字“à l'improviste”，就是使用的英语引号。

注意 [lang|=xx]与:lang(xx)的区别。在这个超文本标记语言示例中，只有BODY 会匹配[lang|=fr]（因为它拥有一个 LANG 属性），而BODY 与P都匹配:lang(fr)（因为它们都是法国语言的）。

<p>Je suis Français.</p>

</body>

5.12 伪元素

在层叠样式单中，伪元素与真实元素狠类似，只是有以下及别处说明的例外。

注意，下面这个小节并没有将':first-line'和':first-letter'在所有情况下的渲染情形都精确定义。未来更高版本的层叠样式单规范中可能会更精确地定义它们。

5.12.1 :first-line伪类

:first-line伪元素为一个段落中的第一行内容设置特殊的样式。例如：

p:first-line { text-transform: uppercase }

以上规范表示“将每一段落的第一行的字母变成大写的”。然而，"P:first-line"这个选择器并不匹配任何真实的超文本标记语言元素。它匹配的是一个伪元素，而遵守此规范的浏览器会在每个段落的开头处插入此伪元素。

注意，第一行的长度取决于多个因素，包括页面宽度、字体大小等等。所以，像这样的一个普通的超文本标记语言段落：

<P>This is a somewhat long HTML

paragraph that will be broken into several

lines. The first line will be identified

by a fictional tag sequence. The other lines

will be treated as ordinary lines in the

paragraph.</P>

其中的各个行会被打散成这样的：

THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT

will be broken into several lines. The first

line will be identified by a fictional tag

sequence. The other lines will be treated as

ordinary lines in the paragraph.

可能会被浏览器“重写”，以为:first-line加入一个虚构的标记序列。此虚构的标记序列能够帮助更好地展示出属性是如何继承的。

<P><P:first-line> This is a somewhat long HTML

paragraph that </P:first-line> will be broken into several

lines. The first line will be identified

by a fictional tag sequence. The other lines

will be treated as ordinary lines in the

paragraph.</P>

如果某个伪元素拆散了一个真实元素，那么可以让虚构的标记序列关闭那个元素，然后再重新开启那个元素。所以，如果我们在之前的段落中加入一个SPAN 元素：

<P><SPAN class="test"> This is a somewhat long HTML

paragraph that will be broken into several

lines.</SPAN> The first line will be identified

by a fictional tag sequence. The other lines

will be treated as ordinary lines in the

paragraph.</P>

那么，浏览器在插入:first-line 的虚构标记序列时，可以为SPAN 模仿一个开始和结束标记。

<P><P:first-line><SPAN class="test"> This is a

somewhat long HTML

paragraph that will </SPAN></P:first-line><SPAN class="test"> be

broken into several

lines.</SPAN> The first line will be identified

by a fictional tag sequence. The other lines

will be treated as ordinary lines in the

paragraph.</P>

:first-line伪元素只能被附加到一个块容器元素。

某个元素的“第一行”可能会同时在其后代块元素中按照同一个流（也就是说，一个既没有指定位置也不是浮动元素的块元素后代）满足相同的条件。例如，在 <DIV><P>This line...</P></DIV> 中，DIV的第一行也是P的第一行（假设 P 和 DIV 都是块级别的元素）。

某个表格单元格或内联块元素的第一行无法作为一个祖先元素的第一行。所以，在 <DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV> 中，DIV的第一行并不是"Hello"。

注意，在 <p><br>First... 这个片段中，P的第一行不包括任何字母（假设按照超文本标记语言4中 BR 的默认样式来渲染）。"First"这个词语也不是第一行。

浏览器应当表现得就像第一行（first-line）这个伪元素的虚构开始标记被嵌套到环绕它的最内层块元素中去了一样。（由于层叠样式单 1 和层叠样式单 2 并没有明确指明这一点，所以程序猿不应当完全依赖这个行为。）举个例子。以下片段的虚构标记序列

<DIV>

<P>First paragraph</P>

<P>Second paragraph</P>

</DIV>

是

<DIV>

<P><DIV:first-line><P:first-line>First paragraph</P:first-line></DIV:first-line></P>

<P><P:first-line>Second paragraph</P:first-line></P>

</DIV>

:first-line伪元素与一个内联元素类似，不过还有一些限制。以下属性可应用到一个:first-line伪元素上：字体属性、颜色属性、背景属性、 'word-spacing' 、 'letter-spacing' 、 'text-decoration' 、 'text-transform' 和 'line-height' 。浏览器可能会允许其它的一些属性。

5.12.2 :first-letter伪元素

如果在一个块元素的第一行中，第一个字母之前没有任何内容（例如图片或内联表格），则:first-letter这个伪类必须能够选中第一个字母。:first-letter伪元素可用来实现“初始字母”（"initial caps"）和“首字下沉”（"drop caps"），它们都是常见的印刷效果。如果它的 'float' 属性是'none'，则它类似于一个内联元素，否则就类似一个悬浮（floated）元素。

以下属性可应用到一个:first-letter伪元素上：字体属性、 'text-decoration' 、 'text-transform' 、 'letter-spacing' 、 'word-spacing'(可用的情况下)、 'line-height' 、 'float' 、 'vertical-align'(仅在'float'为'none'时)、边距属性、填充间距属性、边框属性、颜色属性、背景属性。浏览器可能会允许其它的一些属性。为了允许浏览器渲染出一种符合印刷习惯的正确的首字下沉效果和初始字母效果，浏览器可能会基于那个字母的开头来选择一个行高、宽度和高度，这一点与其它普通元素不同。预期层叠样式单3中会有专门针对首字母的属性。

此示例展示的是初始字母的一种可能渲染方式。注意，首字母伪元素所继承到的行高（'line-height'）是1.1，但是浏览器用不同的方式单独为首字母计算了高度，所以，这没有导致在开头两行之间加入任何不必要的空间。另外要注意，首字母的虚构开始标记是在SPAN 里面，所以首字母的字体样式是普通，而不是按照SPAN 那样是粗体：

p { line-height: 1.1 }

p:first-letter { font-size: 3em; font-weight: normal }

span { font-weight: bold }

...

<p><span>Het hemelsche</span> gerecht heeft zich ten lange lesten<br>

Erbarremt over my en mijn benaeuwde vesten<br>

En arme burgery, en op mijn volcx gebed<br>

En dagelix geschrey de bange stad ontzet.

Image illustrating the :first-letter pseudo-element

以下的层叠样式单2.1代码会使得首字母下沉并占据大约两行的空间：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<HTML>

<HEAD>

<TITLE>Drop cap initial letter</TITLE>

P { font-size: 12pt; line-height: 1.2 }

P:first-letter { font-size: 200%; font-style: italic;

font-weight: bold; float: left }

SPAN { text-transform: uppercase }

</STYLE>

</HEAD>

<BODY>

<P><SPAN>The first</SPAN> few words of an article

in The Economist.</P>

</BODY>

</HTML>

此示例在渲染之后是这样的：

Image illustrating the combined effect of the :first-letter and :first-line pseudo-elements

[D]

对应的虚构标记序列是：

<P>

<SPAN>

<P:first-letter>

</P:first-letter>he first

</SPAN>

few words of an article in the Economist.

</P>

注意，:first-letter伪元素的标记直接环绕着其内容（即，首字母），而:first-line伪元素的开始标记是在块元素的开始标记之后立即插入的。

为了达到传统的首字下沉效果，浏览器可能会近似地处理字体大小，以便对齐基线。另外，符号的轮廓在渲染的时候可能也会计算在内。

在首字母之前及之后的标点符号（即，统一码（Unicode [UNICODE] ）里在"开始（ open ） " (Ps)、"结束（ close ） " (Pe)、"初始（initial ） " (Pi)、"终结（ final ） " (Pf)和"其它（other ） " (Po)标点符号类中定义的那些字符）也应当被包含进去，例如：

Quotes that precede thefirst letter should be included.

[D]

如果首字母是一个数字的话，':first-letter'选择器也匹配成功，例如，"67 million dollars is a lot of money."中的"6"

:first-letter伪元素对块容器元素有效。

:first-letter伪元素可用于以下元素：包含文字的元素；或在同一个流中拥有包含文字的后代的元素。浏览器应当表现得就像首字母伪元素的虚构开始标记是位于元素的第一个字母之前一样，即使第一个字母是处于一个后代元素中也是如此。

举个例子。以下超文本标记语言片段的虚构标记序列：

<div>

<p>The first text.

是：

<div>

<p><div:first-letter><p:first-letter>T</...></...>he first text.

一个表格单元格或内联块的首字母不可以作为一个祖先元素的首字母。所以，在 <DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV> 中，DIV的首字母不是"H"。事实上，这个DIV没有首字母。

首字母必须出现于第一个格式化行中。例如，在 <p><br>First... 这个片段中，第一行里没有任何字母，所以':first-letter'没有匹配任何东西（假设是按照超文本标记语言4中 BR 的默认样式来渲染）。特别说明，它并不匹配"First."中的"F"。

如果某个元素是一个列表条目（'display: list-item'），则':first-letter'匹配的是列表标记符之后的渲染框中的第一个字母。浏览器可能会无视那些拥有'list-style-position: inside'属性的列表条目的':first-letter'。如果某个元素拥有':before' 或':after'内容，那么':first-letter'匹配的就是包含那个内容的元素的首字母。

例如，在规则'p:before {content: "Note: "}'之后，选择器'p:first-letter'会匹配"Note"中的"N"。

某些语言中可能会有关于如何处理特定字母组合的规则。例如，在丹麦语中，如果"ij"的字母组合出现在词语的开头，那么这两个字母都应当被认为处于:first-letter伪元素中。

如果将要组合首字母的那些字母并不是处于同一个元素中，例如 <p>'<em>T... 中的"'T"，那么，此时，浏览器可以这样：采用其中一个元素来创建一个首字母伪元素；同时采用这两个元素作为首字母元素；或者干脆就不创建伪元素。

类似地，如果某个块的首字母并不是处于该行的开头（例如，对于双向排版的情况），那么浏览器也不需要创建伪元素。

以下示例展示的是，互相重叠的伪元素之间是如何交互的。每个P元素的首字母都会是绿色的，字体大小是'24pt'。第一行的其它部分将是蓝色的（'blue'），而该段落的其它部分将是红色的（'red'）。

p { color: red; font-size: 12pt }

p:first-letter { color: green; font-size: 200% }

p:first-line { color: blue }

<P>Some text that ends up on two lines</P>

假设在词语"ends"之前出现一个换行符，那么这个片段的虚构标记序列将会是：

<P>

<P:first-line>