5 选择器

5.1 模式匹配

CSS中，模式匹配规则决定哪些样式规则将被应用于文档树中的元素，这些模式叫选择器，从简单的元素名到丰富的上下文模式（rich contextual patterns）。如果特定元素的模式中的所有条件都为真，则选择器匹配该元素

选择器中，文档语言元素名的大小写敏感性取决于文档语言，例如，HTML中，元素名是大小写不敏感的，但在XML中是大小写敏感的

下表总结了CSS 2.1选择器语法：

5.2 选择器语法

简单选择器可以是类型选择器或者后面紧跟着一个或多个任意顺序的属性选择器，ID选择器或伪类的通配选择器。简单选择器在其所有部分都匹配（成功）时才匹配（成功）

注意：这里用在CSS 2.1中的术语与用在CSS3中的不同，例如，“简单选择器”参考的CSS3选择器部分要比CSS 2.1更少。见CSS3选择器模块[CSS3SEL]

选择器是一串用连接符分隔的一个或者多个简单选择器。连接符是：空白字符，">"和"+"。空白字符可以出现在连接符和它前后的简单选择器之间

与选择器匹配的文档树元素叫做选择器的对象（subjects）。由一个简单选择器组成的选择器能够匹配满足其需求的任何元素。给一串（选择器）前面加上一个简单选择器和连接符就增加了额外的匹配约束，所以一个选择器的对象总是最后一个简单选择器匹配的元素的子集

一个伪元素可以被添加在一串选择器中最后一个简单选择器后面，此时样式信息会被应用在每个匹配元素的子内容（subpart ）上

5.2.1 分组

当几个选择器共享相同的声明时，它们可以放进用逗号分隔的列表里

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

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

CSS还提供了其它“简写”机制，包括（一次）声明多条（规则）和简写属性

5.3 通配选择器

通配选择器写作"*"，匹配任意元素类型名。匹配文档树中的任意一个元素

如果通配选择器不是简单选择器的唯一组成部分（即选择器不为"*"），"*"可以省略，例如：

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

5.4 类型选择器

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

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>

h1 { color: red }
em { color: red }
h1 em { color: blue }

<H1>This <SPAN class="myclass">headline 
is <EM>very</EM> important</SPAN></H1>

div * p 

div p *[href]

5.6 子选择器

子选择器匹配一个作为某些元素的子级的元素。子选择器由两个或者更多用">"分隔的选择器组成

body > P { line-height: 1.3 }

div ol>li p

关于选择元素的第一个子级的更多信息请查看下面的:first-child伪类小节

5.7 相邻兄弟选择器

相邻兄弟选择器语法如下：E1 + E2，E2是选择器的对象，如果E1和E2在文档树中共享相同的父级且E1紧挨在E2前面，忽略非元素节点（例如，文本节点和注释），选择器就成功匹配（E2）

math + p { text-indent: 0 } 

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

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

5.8 属性选择器

CSS 2.1允许编写者指定规则来匹配那些在源文档中定义了某些属性的元素

5.8.1 匹配属性与属性值

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

[att]

当元素设置了"att"属性时匹配，无论该属性的值是什么

[att=val]

当元素的"att"属性值恰好是"val"时匹配

[att~=val]

代表一个有att属性且值是一个由空白字符分隔的单词列表，其中之一恰好是"val"的元素。如果"val"含有空格，就不代表任何东西（因为单词是用空格分隔的）。如果"val"是个空字符串，它将同样不代表任何东西

[att|=val]

代表一个有att属性且值 ，要么是以"val"开头后面紧跟着"-"(U+002D)的元素。这主要是为了允许语言子码（language subcode）按照BCP 47（[BCP47]）或者其后续版本进行匹配（例如，HTML中a元素的hreflang属性）。关于lang（或者xml:lang）语言子码匹配，请查看:lang伪类

属性值必须是标识符或者字符串，选择器中属性名和值的大小写敏感性取决于文档语言

h1[title] { color: blue; }

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

多个属性选择器可以用来引用同一个元素的几个属性，或者甚至把同一个属性引用多次

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

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

*[lang=fr] { display : none }

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

DIALOGUE[character=romeo] 
     { voice-family: "Laurence Olivier", charles, male }
      
DIALOGUE[character=juliet]  
     { voice-family: "Vivien Leigh", victoria, female }

5.8.2 文档类型定义（DTD）中的默认属性值

属性匹配是针对文档树中的属性值的。默认属性值可以定义在DTD里或者其它地方，但不一定能被属性选择器匹配到。样式表应该设计成在文档树中不含默认值时也能正常工作

更精确的，UA可以但不需要读取DTD的“外部子集（external subset）”，但需要在文档的“内部子集（internal subset）”中查找默认属性值（这些子集的定义见[XML10]）。DTD外部子集中定义的默认属性值在文档树中出现与否，取决于UA

能识别XML命名空间[XMLNAMESPACES]的UA，可以但不必须用命名空间相关的信息来处理默认属性值，就像这些信息来自文档一样（例如，XHTML UA不必使用其内置的XHTML DTD相关信息）

注意，典型地，实现选择忽略外部子集

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

EXAMPLE[notation=decimal] { /*... default property settings ...*/ }
EXAMPLE[notation=octal]   { /*... other settings...*/ }

EXAMPLE                   { /*... default property settings ...*/ }
EXAMPLE[notation=octal]   { /*... other settings...*/ }

5.8.3 类选择器

HTML中，表示class属性的话，编写者可以把句号(.)符号作为~=符号的替代品。因此，对于HTML，div.value与div[class~=value]具有相同的含义。属性值必须紧跟在“句号”(.)后面。UA可以在XML文档中把句号(.)符号用于选择器，如果UA有特定命名空间信息允许它决定各个命名空间下哪个属性是"class"属性。这种特定命名空间信息的示例在针对特殊命名空间的规范（例如，SVG 1.1 [SVG11]描述了SVG "class"属性以及UA应该怎样解释它，类似的，MathML 3.0 [MATH30]描述了MathML "class"属性）中有

*.pastoral { color: green }  /* all elements with class~=pastoral */

.pastoral { color: green }  /* all elements with class~=pastoral */

H1.pastoral { color: green }  /* H1 elements with class~=pastoral */

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

为了匹配"class"值的一个子集，每个值前面必须要有一个"."

 
p.marine.pastoral { color: green }

5.9 ID选择器

文档语言可以含有被声明为ID型属性。ID型属性的特殊之处是没有两个这种属性可以有相同的值。无论在什么文档语言中，一个ID属性都可以被用作其元素的唯一标识。HTML中，所有ID属性都叫"id"，XML应用程序可以命名不同的ID属性，但会受到同样的限制

文档语言的ID属性允许编写者给文档树中的一个元素实例设置一个标识符。CSS ID选择器根据它的标识符匹配一个元素实例。一个CSS ID选择器包含"#"和后面紧跟着的ID值，该值必须是一个标识符

注意，CSS没有指定UA如何获知一个元素的ID属性。UA可能会，例如，读取文档的DTD，含有的硬编码信息或者询问用户

h1#chapter1 { text-align: center }

<HEAD>
  <TITLE>Match P</TITLE>
  <STYLE type="text/css">
    *#z98y { letter-spacing: 0.3em }
  </STYLE>
</HEAD>
<BODY>
   <P id=z98y>Wide text</P>
</BODY>

<HEAD>
  <TITLE>Match H1 only</TITLE>
  <STYLE type="text/css">
    H1#z98y { letter-spacing: 0.5em }
  </STYLE>
</HEAD>
<BODY>
   <P id=z98y>Wide text</P>
</BODY>

ID选择器比属性选择器的特殊性更高。例如，HTML中，根据层叠，选择器#p123比[id=p123]更具体

如果一个元素有多个ID属性，鉴于ID选择器的目的，它们必须全部都被当作这个元素的ID。这种情况可以通过使用id[XMLID]，DOM3 Core [DOM-LEVEL-3-CORE]，XML DTDs [XML10]和特定命名空间信息（namespace-specific knowledge）的混合（mixtures）来实现

5.10 伪元素与伪类

CSS 2.1中，样式通常是根据元素在文档树中的位置添加的。这种简单模型在大多数情况下足够了，但在有些常见的排版场景下可能无法根据文档树的结构（添加样式）。例如，HTML 4（见[HTML4]）中，没有元素对应的是一个段落的第一行，所以简单CSS选择器无法引用它

为了允许根据文档树之外的信息来格式化，CSS引入了伪元素和伪类的概念

• 伪元素建立了对超出文档语言指定的文档树的抽象。例如，文档语言不提供访问元素内容的第一个字母或者第一行的机制。CSS伪元素允许样式表设计者引用这个通过其它方式无法访问的信息。伪元素也给样式表设计者提供了一种给源文档中不存在的内容赋予样式的方法（例如，:before和:after伪元素提供了访问生成的内容的方法）
• 伪类根据元素的特征分类，而不是名字，属性或者内容。原则上，这些特征无法从文档树推断得出。伪类可以是动态的，用户与文档交互时，一个元素可能获得或者失去一个伪类。':first-child'是个特例，可以根据文档树推断出来，而且':lang()'在某些情况下也能根据文档树推断出来

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

伪类允许出现在选择器的任何位置，而一个伪元素只能跟在选择器的最后一个简单选择器后面

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

有些伪类是互斥的，而其它的可以同时用在一个元素上。在规则冲突的情况下，常规层叠顺序决定结果

5.11 伪类

5.11.1 :first-child伪类

:first-child伪类匹配一个作为某个其它元素的第一个子级的元素

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

<P> The last P before the note.
<DIV class="note">
   <P> The first P inside the note.
</DIV>

<P> The last P before the note.
<DIV class="note">
   <H2>Note</H2>
   <P> The first P inside the note.
</DIV>

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

注意，因为匿名盒不是文档树的一部分，计算第一个子级时不算它们

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

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

* > a:first-child   /* A is first child of any element */
a:first-child       /* Same */

5.11.2 link伪类：:link与:visited

用户代理通常把未访问过的链接和已访问过的区分显示。CSS提供了伪类':link'和':visited'来区分它们：

• :link伪类应用于未访问过的链接
• :visited伪类应用于曾被用户访问过的链接

UA有时会让一个访问过的链接回到（未访问的）':link'状态

这两种状态是互斥的

文档语言决定了哪些元素是超链接源锚点（anchor）。例如，HTML4中，link伪类适用于带有"href"属性的A元素。因此，下列两条CSS 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伪类，来确定用户已经曾访问过哪些站点，而不经用户同意

因此，UA可以把所有链接都当作未被访问过的链接，或者在分别渲染访问过的和未访问过的链接时，采取其它措施来保护用户的隐私。关于处理隐私的更多信息请查看[P3P]

5.11.3 动态伪类： :hover，:active与:focus

交互式用户代理有时会改变渲染（效果）以响应用户动作。对于一般情况，CSS提供了三个伪类：

• :hover伪类应用于当用户指定了一个元素（用某些指针设备），但没有激活它时。例如，一个可视化用户代理在光标（鼠标指针）悬停在元素生成的盒上时应用该伪类。不支持互动媒体（interactive media） 的用户代理不必支持该伪元素。某些（与CSS规范）一致的支持互动媒体的用户代理支持可能也不支持该伪类（例如，笔交互设备（a pen device））
• :active伪类应用于当一个元素被用户激活时。例如，在用户按下鼠标按钮并释放时
• :focus伪类应用于当一个元素拥有焦点（接受键盘事件或者其它文本输入形式）时

一个元素可以同时匹配几个伪类

CSS没有定义哪些元素可以处于上面的状态，以及这些状态怎样进入和离开。脚本（执行）可以改变元素是否对用户事件做出响应，并且不同的设备和UA指向和激活元素的方式可能也不相同

CSS 2.1没有定义':active'或者':hover'元素的父级是不是也处于这种状态

用户代理不必因为伪类转变而重排（reflow）当前显示的文档。例如，一个样式表可以指定:active链接的'font-size'比非激活状态的链接大，但因此会导致字母在读者选中链接时改变位置，UA可以忽略相关样式规则

a:link    { color: red }    /* unvisited links */
a:visited { color: blue }   /* visited links   */
a:hover   { color: yellow } /* user hovers     */
a:active  { color: lime }   /* active links    */

a:focus { background: yellow }
a:focus:hover { background: white }

关于展示焦点轮廓（focus outline）的更多信息，请查看动态焦点轮廓章节

5.11.4 语言伪类： :lang

如果文档语言指定了怎样定义一个元素的人类语言（human language），就有可能用CSS写出选择器根据元素的语言来匹配一个元素。例如，HTML[HTML4]中，语言是由"lang"属性，META元素以及可能的来自协议的信息（例如，HTTP头）结合起来决定的。XML用一个叫xml:lang的属性和可能的其它文档特定语言的方法来确定语言

伪类':lang(C)'匹配语言为C的元素。是否存在匹配，仅仅根据标识符C等于元素的语言值或者是连字符分隔元素的语言值的子串来确定。同样的，就像'|='操作符一样。C与元素语言值的匹配过程对ASCII范围内的字符是大小写不敏感的。标识符C不一定是一个合法的语言名

C不能为空

注意：建议文档和协议通过BCP 47 [BCP47]码或者其后续版本指出语言，而基于XML的文档[XML10]则用"xml:lang"属性。见“FAQ：两个字母或三个字母的语言码”

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

<body lang=fr>
  <p>Je suis Français.</p>
</body>

5.12 伪元素

伪元素的行为就像CSS中的真实元素一样，但存在下面描述的以及其它的例外

注意，下面的小节没有定义严格的对':first-line'和':first-letter'的渲染，将来的CSS版本可能会精确地定义它们

5.12.1 :first-line伪元素

first-line伪元素对段落内容的第一个格式化行应用特殊样式。例如：

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

上面的规则表示“把每个段落的第一个行的字母变成大写”。然而，选择器"P:first-line"不会匹配任何真实HTML元素。它匹配一个（与CSS规范）一致的用户代理将在每个段落的开头插入的伪元素

注意，第一行的长度取决于很多因素，包括页面宽度，字体大小等等。因此，原始的HTML段落例如：

<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可能会被用户代理“重写”成含有虚拟标签序列（fictional tag sequence）的形式，这种虚拟标签序列有助于展示属性的继承方式，可能会被用户代理“重写”：

<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伪元素只能用于块容器元素

元素的"第一个格式化行"可能出现在相同流（flow）中的一个块级后代（即一个没有被定位且不浮动的块级后代）里面。例如，<DIV><P>This line...</P></DIV>中DIV的第一行是P的第一行（假设P和DIV都是块级的）

表格单元或者inline-block的第一行不能作为祖先元素第一个格式化行。因此，在<DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV>中，DIV的第一个格式化行不是"Hello"

注意，<p><br>First...中P的第一行不包含任何字母（假设是HTML 4中BR默认样式表）。单词"First"不在第一个格式行内

UA应该表现的就像first-line伪元素的虚拟开始标签嵌套在最内层的闭合块级元素中（因为CSS1和CSS2都没有说明这种情况，编写者不应该依赖这种行为），例如：

<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伪元素：font属性，color属性，background属性，'word-spacing'，'letter-spacing'，'text-decoration'，'text-transform'和'line-height'。UA还可能应用其它属性

5.12.2 :first-letter伪元素

:first-letter伪元素必须选择一个块的第一行的第一个字母，如果这一行中在它前面没有跟着任何其它内容（例如，图片或者inline table）的话。:first-letter伪元素可以用于“首字母大写（initial caps）”和“首字母下沉（drop caps）”之类的常见排版效果。此类首字母与'float'属性为'none'的行内元素或者浮动元素类似

适用于:first-letter伪元素的属性有： font属性， 'text-decoration'， 'text-transform'， 'letter-spacing'， 'word-spacing'（在合适的时候）， 'line-height'， 'float'，'vertical-align'（仅当'float'为'none'时）， margin属性， padding属性， border属性， color属性， background属性。 UA还可能会应用其它规则。为了让UA正确渲染首字母下沉或者首字母大写排版，UA可以根据字母的形状选择行高，宽度和高度，这与常规元素不同。预期CSS3会有适用于首字母的具体属性

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.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
 <HEAD>
  <TITLE>Drop cap initial letter</TITLE>
  <STYLE type="text/css">
   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>

<P>
<SPAN>
<P:first-letter>
T
</P:first-letter>he first
</SPAN> 
few words of an article in the Economist.
</P>

为了达到传统首字母下沉的格式化效果，用户代理可以用近似字体大小，例如为了对齐基线。另外，在格式化时，还可能会把字形轮廓考虑在内

（first-letter）应该包括紧跟在首字母前后的标点符号（即用Unicode [UNICODE]定义的"open" (Ps)，"close" (Pe)，"initial" (Pi)，"final" (Pf)和"other" (Po)标点类字符），例如：

首字母是数字的话，':first-letter'也同样适用，例如，"67 million dollars is a lot of money."中的"6"

:first-letter伪元素适用于块容器元素

:first-letter伪元素可以用于所有含有文本的元素，或者相同流（flow）中有含有文本的后代（元素）。UA应该表现得像first-letter伪元素的虚拟开始标签恰好在该元素的第一块文本内容之前，即使第一块文本内容位于后代元素中

<div>
<p>The first text.

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

表格单元或者inline-block的首字母不能作为其祖先元素的首字母。因此，在<DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV>中，DIV的首字母不是字母"H"，实际上，该DIV没有首字母

首字母必须出现在第一个格式化行中，例如，片段：<p><br>First...中，第一行没有任何字母，那么':first-letter'不会匹配任何东西（假设是HTML 4中BR的默认样式）。这种情况下，它不会匹配"First"的"F"

如果一个元素是列表项（'display: list-item'），':first-letter'适用于标记后面的主要盒中的首字母。 UA可以忽略具有'list-style-position: inside'的列表项上的':first-letter'（规则）。如果一个元素具有':before'或者':after'内容，':first-letter'应用于元素包括这些内容在内的第一个字母

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

有些语言可能有关于怎样对待特定字母组合的具体规则，在荷兰，例如，如果字母组合"ij"出现在单词开头，这两个字母应该都属于:first-letter伪元素

如果将要作为first-letter的字母不再同一个元素中，例如<p>'<em>T...中的"'T"，UA可能会从中取一个元素创建first-letter伪元素，或者都给创建伪元素，或者干脆不创建伪元素

类似的，如果块的首字母不在行开头（例如，由于双向重排序（bidirectional reordering）），那么UA不需要创建该伪元素

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>

<P>
<P:first-line>
<P:first-letter> 
S 
</P:first-letter>ome text that 
</P:first-line> 
ends up on two lines 
</P>

5.12.3 :before与:after伪元素

':before'和':after'伪元素可以用来在一个元素的内容之前或之后插入生成的内容，在生成文本章节中有解释

h1:before {content: counter(chapno, upper-roman) ". "}

当:first-letter和:first-line伪元素被应用在一个具有使用:before和:after生成内容的元素，它们应用于元素包括生成的内容在内的首字母或首行

p.special:before {content: "Special! "}
p.special:first-letter {color: #ffd800}