CSS2.1 选择器

5 Selectors选择器 5.1 Pattern matching 匹配模式 In CSS, pattern matching rules determine which style rules apply to elements in the document tree. These patterns, called selectors, may range from simple element names to rich contextual patterns. If all conditions in the pattern are true for a certain element, the selector matches the element. CSS中，匹配模式的规则决定了那个样式会被应用到文档树中的元素上面。这些模式叫做选择器，它包含了一个简单的元素名称到丰富的上下文匹配模式。如果模式中的所有条件都匹配某个元素，那么这个选择器就匹配了这个元素。 The case-sensitivity of document language element names in selectors depends on the document language. For example, in HTML, element names are case-insensitive, but in XML they are case-sensitive. 选择器中元素名称将取决于该文档语言是否大小写敏感。例如，在HTML中，元素的名称是不区分大小写的，而XML中它们区分大小写。 The following table summarizes CSS 2.1 selector syntax: 下面的表格简要介绍了CSS2.1选择器的语法：

Pattern	Meaning	Described in section
*	Matches any element. 匹配任何元素。	Universal selector 通用选择器
E	Matches any E element (i.e., an element of type E). 匹配任意E元素 (例如，任何元素类型是E的元素).	Type selectors 类型选择器
E F	Matches any F element that is a descendant of an E element. 匹配E的任意后代元素F	Descendant selectors 后代选择器
E > F	Matches any F element that is a child of an element E. 匹配E的任意子孙元素F	Child selectors 子选择器
E:first-child	Matches element E when E is the first child of its parent. 当E是其父元素的第一个子元素时，匹配该元素。	The :first-child pseudo-class 首元素伪类
E:link E:visited	Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited). :link匹配没有被访问过的超链接元素 :visited匹配已被访问过的超链接元素	The link pseudo-classes 超链接伪类
E:active E:hover E:focus	Matches E during certain user actions. 在用户执行某些行为时，匹配该元素	The dynamic pseudo-classes 动态伪类
E:lang(c)	Matches element of type E if it is in (human) language c (the document language specifies how language is determined).	The :lang() pseudo-class 语言伪类
E + F	Matches any F element immediately preceded by a sibling element E. 匹配任意元素F，且该元素之前的同辈元素为E。	Adjacent selectors 临近选择器
E[foo]	Matches any E element with the "foo" attribute set (whatever the value). 匹配任意含有foo属性的元素E（不论它的值为何值）	Attribute selectors 属性选择器
E[foo="warning"]	Matches any E element whose "foo" attribute value is exactly equal to "warning". 匹配任意含有foo属性且属性值等于“warning”的元素E	Attribute selectors 属性选择器
E[foo~="warning"]	Matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warning". 匹配任意E元素，该元素的“foo”属性为一列由空格分隔的值，且其中的一个值等于“warning”。	Attribute selectors 属性选择器
E[lang|="en"]	Matches any E element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en". 匹配任意E元素，该元素“lang”属性是由一系列“-”分隔的值组成，且第一个值为“en”。	Attribute selectors 属性选择器
DIV.warning	Language specific. (In HTML, the same as DIV[class~="warning"].) 特定语言.（在HTML中，等同于选择器DIV[class~="warning"]。）	Class selectors 类选择器
E#myid	Matches any E element with ID equal to "myid". 匹配任意ID值为“myid”的元素E。	ID selectors ID选择器

5.2 Selector syntax 选择器语法 A simple selector is either a type selector or universal selector followed immediately by zero or more attribute selectors, ID selectors, or pseudo-classes, in any order. The simple selector matches if all of its components match. 一个简单选择器可以是一个类型选择器或通用选择器紧跟着一个或多个属性选择器，ID选择器，或者伪类的任意组合。如果一个简单选择器的所有子匹配都成立那么该选择器将匹配该元素。 Note: the terminology used here in CSS 2.1 is different from what is used in CSS3. For example, a "simple selector" refers to a smaller part of a selector in CSS3 than in CSS 2.1. See the CSS3 Selectors module [CSS3SEL]. 说明：在CSS2.1中的用到的术语与CSS3中的术语有所不同。例如,一个简单选择器参考CSS3中的部分要少于CSS2.1.请查看CSS3 选择器模块[CSS3SEL]。 A selector is a chain of one or more simple selectors separated by combinators. Combinators are: white space, ">", and "+". White space may appear between a combinator and the simple selectors around it. 一个选择器由一个或多个简单选择器以连接符分隔而成。连接符包括：空格，“》”，和“+”。空格可以出现在连接符和简单选择器的周围。 The elements of the document tree that match a selector are called subjects of the selector. A selector consisting of a single simple selector matches any element satisfying its requirements. Prepending a simple selector and combinator to a chain imposes additional matching constraints, so the subjects of a selector are always a subset of the elements matching the last simple selector. 文档树中的元素匹配了一个选择器，那么这个元素被称为这个选择器的主题。 一个选择器包含一个单独的简单选择器，它将匹配任意满足其要求的元素。 为一个选择器链添加一个简单选择器和一个连接符来增强额外的匹配约束，此时该选择器的主题将总是最后一个简单选择器匹配的该元素的子元素。 One pseudo-element may be appended to the last simple selector in a chain, in which case the style information applies to a subpart of each subject. 在一个选择器链中一个伪元素会被添加 最后一个简单选择器的后面，此时样式信息将被应用于每个一个匹配主题的子元素上面。 5.2.1 Grouping 组 When several selectors share the same declarations, they may be grouped into a comma-separated list. 当多个选择器共同拥有同一个声明块时，他们可以由逗号分隔组成一个列选择器。 Example(s): In this example, we condense three rules with identical declarations into one. Thus, 在这个例子中，我们可以将三个具有相同声明块的规则简化为一个。 h1 { font-family: sans-serif } h2 { font-family: sans-serif } h3 { font-family: sans-serif } is equivalent to: 等于： h1, h2, h3 { font-family: sans-serif } CSS offers other "shorthand" mechanisms as well, including multiple declarations and shorthand properties. CSS也提供了其他的简写机制，包括 多个声明块 和 简写属性。 5.3 Universal selector 通用选择器 The universal selector, written "*", matches the name of any element type. It matches any single element in the document tree. 通用选择器，写作“*”，匹配任意元素类型的名称。该选择器可以匹配文档树中的任意单个元素。 If the universal selector is not the only component of a simple selector, the "*" may be omitted. For example: 如果一个通用选择器不是某个简单选择器的唯一组成部分，它将被忽略。例如：

• *[lang=fr] and [lang=fr] are equivalent.
• *[lang=fr] and [lang=fr]相等
• *.warning and .warning are equivalent.
• *.warning and .warning相等.
• *#myid and #myid are equivalent.
• *#myid and #myid相等

5.4 Type selectors 类型选择器 A type selector matches the name of a document language element type. A type selector matches every instance of the element type in the document tree. 一个类型选择器匹配某个文档语言的元素类型的名称。在一个文档树中，一个类型选择器可以匹配所有该元素类型的实例。 Example(s): The following rule matches all H1 elements in the document tree: 下面的规则将匹配文档树中所有H1元素： h1 { font-family: sans-serif } 5.5 Descendant selectors 后代选择器 At times, authors may want selectors to match an element that is the descendant of another element in the document tree (e.g., "Match those EM elements that are contained by an H1 element"). Descendant selectors express such a relationship in a pattern. A descendant selector is made up of two or more selectors separated by white space. A descendant selector of the form "A B" matches when an element B is an arbitrary descendant of some ancestor element A. 有时候，作者希望选择器匹配文档树中一个元素，该元素是另一个元素的后代元素（例如：匹配所有H1元素内的EM元素）。后代选择器就是表达这样一个匹配关系。一个后代选择器由以空格分隔的两个或更多选择器组成。当一个B元素是其某个祖先元素A的任意后代时，后代选择器“A B”将匹配该B元素。 Example(s): For example, consider the following rules: 例如，考虑下面几个规则： h1 { color: red } em { color: red } Although the intention of these rules is to add emphasis to text by changing its color, the effect will be lost in a case such as: 即使这些规则的目的是通过改变字体的颜色来强调EM元素中的内容，但是最后没有任何效果，像下面这样： <H1>This headline is <EM>very</EM> important</H1> We address this case by supplementing the previous rules with a rule that sets the text color to blue whenever an EM occurs anywhere within an H1: 我们依照这种方式给上面的这些规则补充一条，设置H1元素中EM元素字体的颜色为蓝色。 h1 { color: red } em { color: red } h1 em { color: blue } The third rule will match the EM in the following fragment: 第三条规则将匹配下面代码块中EM元素： <H1>This <SPAN>headline is <EM>very</EM> important</SPAN></H1> Example(s): The following selector: 下面这个选择器： div * p matches a P element that is a grandchild or later descendant of a DIV element. Note the white space on either side of the "*" is not part of the universal selector; the white space is a combinator indicating that the DIV must be the ancestor of some element, and that that element must be an ancestor of the P. 匹配DIV元素内的所有P元素。注意“*”两侧的空格不是通用选择器的组成部分；这个空格是一个连接符，它表示DIV元素是某些元素的祖先元素并且这些元素是元素P的祖先元素。 Example(s): The selector in the following rule, which combines descendant and attribute selectors, matches any element that (1) has the "href" attribute set and (2) is inside a P that is itself inside a DIV: 下面这条规则的选择器由后代选择器和属性选择器组成，它将匹配一些元素，（1）这些拥有“href”属性，（2）这些元素被包含在元素P中，元素P被包含在DIV中。 div p *[href] 5.6 Child selectors 子选择器 A child selector matches when an element is the child of some element. A child selector is made up of two or more selectors separated by ">". 一个子选择器匹配某些元素的子元素。一个子选择器由以“>”号分隔的两个或更多选择器组成。 Example(s): The following rule sets the style of all P elements that are children of BODY: 下面的规则将把这些样式应用到BODY的所有子元素P上： body > P { line-height: 1.3 } Example(s): The following example combines descendant selectors and child selectors: 下面这个例子组合了后代选择器和字选择器： div ol>li p It matches a P element that is a descendant of an LI; the LI element must be the child of an OL element; the OL element must be a descendant of a DIV. Notice that the optional white space around the ">" combinator has been left out. 它将匹配一个P元素，该P元素是某个LI元素的后代元素，并且该LI元素必须是某个OL元素的子元素，而该OL元素同时也必须是某个DIV元素的后代元素。说明：围绕在“>”周围的空格将被忽略。 For information on selecting the first child of an element, please see the section on the :first-child pseudo-class below. 想了解怎样选择一个元素的第一个元素，请参考下面的:first-child 伪类的说明。 5.7 Adjacent sibling selectors 临近选择器 Adjacent sibling selectors have the following syntax: E1 + E2, where E2 is the subject of the selector. The selector matches if E1 and E2 share the same parent in the document tree and E1 immediately precedes E2, ignoring non-element nodes (such as text nodes and comments). 临近选择器拥有如下语法：E1+E2，E2是这个选择器的主题。在文档树中，如果E1和E2拥有同一个父元素，且E2紧跟在E1的后面，那么该选择器将匹配该E2元素，该选择器会忽略E2和E1间的非元素节点（例如文本节点和注释节点）。 Example(s): Thus, the following rule states that when a P element immediately follows a MATH element, it should not be indented: 因此，下面的规则声明了一个紧跟在MATH元素后面的P元素将不会被缩进： math + p { text-indent: 0 } The next example reduces the vertical space separating an H1 and an H2 that immediately follows it: 下面的例子将减少H1元素和紧跟的H2元素之间的垂直间隙： h1 + h2 { margin-top: -5mm } Example(s): The following rule is similar to the one in the previous example, except that it adds a class selector. Thus, special formatting only occurs when H1 has class="opener": 除了增加一个类选择器，下面的例子和上一个例子基本相同。因此，指定的样式将会添加到class="opener"的H1元素上： h1.opener + h2 { margin-top: -5mm } 5.8 Attribute selectors 属性选择器 CSS 2.1 allows authors to specify rules that match elements which have certain attributes defined in the source document. 在源文档中，CSS 2.1允许作者指定一些规则来匹配拥有某些属性的元素。 5.8.1 Matching attributes and attribute values 匹配属性和属性值 Attribute selectors may match in four ways: 属性选择器拥有四种方式实现： [att] Match when the element sets the "att" attribute, whatever the value of the attribute. 匹配拥有“att”属性的元素，不管该属性的值为何值。 [att=val] Match when the element's "att" attribute value is exactly "val". 匹配拥有属性“att”且其值等于“val”的元素。 [att~=val] Represents an element with the att attribute whose value is a white space-separated list of words, one of which is exactly "val". If "val" contains white space, it will never represent anything (since the words are separated by spaces). If "val" is the empty string, it will never represent anything either. 代表一个拥有att属性的元素，该属性的值是由以空格分隔的一列单词组成，且其中的一个单词等于“val”。如果“val”含有空格，它将不会匹配任何元素（因为属性值中的单词已经被空格分隔开）。如果val是一个空字符串，它将没有任何意义。 [att|=val] Represents an element with the att attribute, its value either being exactly "val" or beginning with "val" immediately followed by "-" (U+002D). This is primarily intended to allow language subcode matches (e.g., the hreflang attribute on the a element in HTML) as described in BCP 47 ([BCP47]) or its successor. For lang (or xml:lang) language subcode matching, please see the :lang pseudo-class. 该选择器将匹配某个拥有att属性的元素，且它的属性值等于“val”或者是以“val”开始后面紧跟“-”(U+002D)。这个选择器主要应用在允许语言子代码匹配BCP 47([BCP47])所描述的元素或者它的继承者。对于lang语言子代码的匹配，请查看关于:lang 伪类的描述。 Attribute values must be identifiers or strings. The case-sensitivity of attribute names and values in selectors depends on the document language. 属性值必须是标识符或字符串。选择器中属性名称和值的大小写取决于文档语言。 Example(s): For example, the following attribute selector matches all H1 elements that specify the "title" attribute, whatever its value: 例如，下面的属性选择器匹配所有拥有“title”属性的H1元素，不管它为任何值： h1[title] { color: blue; } Example(s): In the following example, the selector matches all SPAN elements whose "class" attribute has exactly the value "example": 下面的例子，这个选择器匹配所有属性“class”等于"example"的SPAN元素。 span[class=example] { color: blue; } Multiple attribute selectors can be used to refer to several attributes of an element, or even several times to the same attribute. 多个属性选择器可以被用来查找拥有多个属性的元素，或者同一个属性多次匹配。 Example(s): Here, the selector matches all SPAN elements whose "hello" attribute has exactly the value "Cleveland" and whose "goodbye" attribute has exactly the value "Columbus": 这里，该选择器匹配了所有属性“hello”值为"Cleveland"且属性"goodbye"值为"Columbus"的SPAN元素。 span[hello="Cleveland"][goodbye="Columbus"] { color: blue; } Example(s): The following selectors illustrate the differences between "=" and "~=". The first selector will match, for example, the value "copyright copyleft copyeditor" for the "rel" attribute. The second selector will only match when the "href" attribute has the value "http://www.w3.org/". 下面的选择器阐明了"=" 和 "~="选择器的不同。第一个选择器将会匹配，例如，“rel”值为"copyright copyleft copyeditor"的元素。第二个选择器将只会匹配"href"属性值为http://www.w3.org/的元素。 a[rel~="copyright"] a[href="http://www.w3.org/"] Example(s): The following rule hides all elements for which the value of the "lang" attribute is "fr" (i.e., the language is French). 下面的规则将隐藏所有"lang"属性值为"fr"的元素。（举个例子，语言为法国） *[lang=fr] { display : none } Example(s): The following rule will match for values of the "lang" attribute that begin with "en", including "en", "en-US", and "en-cockney": 下面的规则将会匹配"lang"属性值是以"en"开头的元素，包括"en", "en-US", and "en-cockney": *[lang|="en"] { color : red } Example(s): Similarly, the following aural style sheet rules allow a script to be read aloud in different voices for each role: 同样的，下面的听觉样式规则将允许对于不同角色以不同声音大声的朗读一个脚本。 DIALOGUE[character=romeo] { voice-family: "Laurence Olivier", charles, male } DIALOGUE[character=juliet] { voice-family: "Vivien Leigh", victoria, female } 5.8.2 Default attribute values in DTDs DTDs 中的默认属性 Matching takes place on attribute values in the document tree. Default attribute values may be defined in a DTD or elsewhere, but cannot always be selected by attribute selectors. Style sheets should be designed so that they work even if the default values are not included in the document tree. 选择器可能会匹配一些文档树中的属性值，默认的属性值会被定义在一个DTD中或者其他地方，但是选择器并不能总是找到它。我们所设计的样式表应该在即使文档树中没有默认值的情况下，它也能工作。 More precisely, a UA may, but is not required to, read an "external subset" of the DTD but is required to look for default attribute values in the document's "internal subset." (See [XML10] for definitions of these subsets.) Depending on the UA, a default attribute value defined in the external subset of the DTD might or might not appear in the document tree. 更精确的说，浏览器不需要读取DTD外部的子集，但是却必须能够在文档的内部找到默认属性值。依赖于浏览器，一个定义在DTD子集中的默认属性可以出现在文档树中，也可以不出现。 A UA that recognizes an XML namespace [XMLNAMESPACES] may, but is not required to, use its knowledge of that namespace to treat default attribute values as if they were present in the document. (E.g., an XHTML UA is not required to use its built-in knowledge of the XHTML DTD.) 一个可以识别XML命名空间的浏览器可以但是不要求必须使用该命名空间的知识来处理文档中所出现的默认属性。 Note that, typically, implementations choose to ignore external subsets. Example(s): Example: For example, consider an element EXAMPLE with an attribute "notation" that has a default value of "decimal". The DTD fragment might be <!ATTLIST EXAMPLE notation (decimal,octal) "decimal"> If the style sheet contains the rules EXAMPLE[notation=decimal] { /*... default property settings ...*/ } EXAMPLE[notation=octal]   { /*... other settings...*/ } the first rule might not match elements whose "notation" attribute is set by default, i.e., not set explicitly. To catch all cases, the attribute selector for the default value must be dropped: EXAMPLE                   { /*... default property settings ...*/ } EXAMPLE[notation=octal]   { /*... other settings...*/ } Here, because the selector EXAMPLE[notation=octal] is more specific than the type selector alone, the style declarations in the second rule will override those in the first for elements that have a "notation" attribute value of "octal". Care has to be taken that all property declarations that are to apply only to the default case are overridden in the non-default cases' style rules. 5.8.3 Class selectors 类选择器 Working with HTML, authors may use the period (.) notation as an alternative to the ~= notation when representing the class attribute. Thus, for HTML, div.value and div[class~=value] have the same meaning. The attribute value must immediately follow the "period" (.). UAs may apply selectors using the period (.) notation in XML documents if the UA has namespace specific knowledge that allows it to determine which attribute is the "class" attribute for the respective namespace. One such example of namespace specific knowledge is the prose in the specification for a particular namespace (e.g., SVG 1.1 [SVG11] describes the SVG "class" attribute and how a UA should interpret it, and similarly MathML 2.0 [MATH20] describes the MathML "class" attribute.) 在HTML中，开发人员可以使用(.)符号来替代~=表示Class属性。因此，对于HTML，div.value 与 div[class~=value]意义相同。Class属性值必须紧跟在点(.)的后面。在XML文档中，如果浏览器拥有命名空间且该命名空间拥有具体的语法来说明如何决定一个属性是"class"属性，那么该浏览器就可以使用类选择器。对于特定的命名空间，本规范中的某些段落会有一些描述。（例如，SVG1.1[SVG11]描述了SVG "class" 属性和怎么解析该属性，同样MathML 2.0 [MATH20]描述了MathML "class"属性） Example(s): For example, we can assign style information to all elements with class~="pastoral" as follows: 例如，我们可以为拥有class~="pastoral"属性的所有元素添加如下的样式信息： *.pastoral { color: green }  /* all elements with class~=pastoral */ or just .pastoral { color: green }  /* all elements with class~=pastoral */ The following assigns style only to H1 elements with class~="pastoral": H1.pastoral { color: green }  /* H1 elements with class~=pastoral */ Given these rules, the first H1 instance below would not have green text, while the second would: 按照上面的规则，下面的第一个H1元素内文本的颜色不会为绿色，第二个H1元素文本将为绿色： <H1>Not green</H1> <H1>Very green</H1> To match a subset of "class" values, each value must be preceded by a ".". 如果要匹配"class"值中的子类，每个子类前面必须加上"."。 Example(s): For example, the following rule matches any P element whose "class" attribute has been assigned a list of space-separated values that includes "pastoral" and "marine": 例如，下面的规则将匹配"class"属性值含有"pastoral" 和 "marine"且这些值以空格分隔的任何P元素。 p.marine.pastoral { color: green } This rule matches when but does not match for. 这个选择器将匹配class="pastoral blue aqua marine"的元素，而不会匹配class="pastoral blue"的元素。 Note. CSS gives so much power to the "class" attribute, that authors could conceivably design their own "document language" based on elements with almost no associated presentation (such as DIV and SPAN in HTML) and assigning style information through the "class" attribute. Authors should avoid this practice since the structural elements of a document language often have recognized and accepted meanings and author-defined classes may not. 说明：CSS给予了"class"属性强大的功能，它可以使开发人员使用任何没有联系的元素（例如HTML中的DIV和SPAN元素）来随心所欲的设计他们自己的“文档语言”，以及通过"class"属性来添加样式信息。我们应尽量避免以这种方式来设计文档，因为一个文档语言的结构要素已经得到了广泛的认可和接受，而自定义的Class并没有得到认同。 Note: If an element has multiple class attributes, their values must be concatenated with spaces between the values before searching for the class. As of this time the working group is not aware of any manner in which this situation can be reached, however, so this behavior is explicitly non-normative in this specification. 说明：如果一个元素拥有多个class属性，在寻找它们之前，它们的值必须以空格串联起来。到目前为止，工作小组并不知道这种情况会发展到什么地步，但是不管怎么样，本规范中已经明确规定，这种行为是非标准的。 5.9 ID selectors  ID选择器 Document languages may contain attributes that are declared to be of type ID. What makes attributes of type ID special is that no two such attributes can have the same value; whatever the document language, an ID attribute can be used to uniquely identify its element. In HTML all ID attributes are named "id"; XML applications may name ID attributes differently, but the same restriction applies. 文档语言中可能会包含某些被声明为ID类型的属性。是什么原因使ID类型的属性如此特殊呢？因为不论任何文档语言，不会存在两个相同的ID类型的属性，所以ID属性也可以用作某个元素的唯一标识。在HTML中所有的ID属性名为"id"；在XML 应用程序中 ID属性名可能会有所不同，但是它们都有相同的约束条件。 The ID attribute of a document language allows authors to assign an identifier to one element instance in the document tree. CSS ID selectors match an element instance based on its identifier. A CSS ID selector contains a "#" immediately followed by the ID value, which must be an identifier. 在文档树种，某个文档语言的ID属性可以被当做一个元素的唯一标识符。CSS ID 选择器根据它的标识符来匹配这个元素。一个CSS ID 选择器包含一个"#"号后面紧跟着ID值且该ID值是唯一的。 Note that CSS does not specify how a UA knows the ID attribute of an element. The UA may, e.g., read a document's DTD, have the information hard-coded or ask the user. 说明：CSS没有规定浏览器以何种方式来解析一个元素的ID属性。例如，一个浏览器会读取一个包含硬编码信息DTD文件，然后将信息告知用户。 Example(s): The following ID selector matches the H1 element whose ID attribute has the value "chapter1": 下面的ID选择器匹配了ID属性为"chapter1"的H1元素： h1#chapter1 { text-align: center } In the following example, the style rule matches the element that has the ID value "z98y". The rule will thus match for the P element: 下面的例子，这条样式规则将匹配ID值为"z98y"的元素，也就是会匹配这个P元素 <HEAD> <TITLE>Match P</TITLE> <STYLE> *#z98y { letter-spacing: 0.3em } </STYLE> </HEAD> <BODY> <P>Wide text</P> </BODY> In the next example, however, the style rule will only match an H1 element that has an ID value of "z98y". The rule will not match the P element in this example: 下面的例子，不管怎样，这条规则都会匹配ID值为"z98y"的H1元素，而不会匹配例子中的P元素： <HEAD> <TITLE>Match H1 only</TITLE> <STYLE> H1#z98y { letter-spacing: 0.5em } </STYLE> </HEAD> <BODY> <P>Wide text</P> </BODY> ID selectors have a higher specificity than attribute selectors. For example, in HTML, the selector #p123 is more specific than [id=p123] in terms of the cascade. 相对于属性选择器，ID选择器具有较高的专一性。例如，在HTML中，选择器#p123在样式表中的地位比选择器[id=p123] 要高。 Note. In XML 1.0 [XML10], the information about which attribute contains an element's IDs is contained in a DTD. When parsing XML, UAs do not always read the DTD, and thus may not know what the ID of an element is. If a style sheet designer knows or suspects that this will be the case, he should use normal attribute selectors instead: [name=p371] instead of #p371. However, the cascading order of normal attribute selectors is different from ID selectors. It may be necessary to add an "!important" priority to the declarations: [name=p371] {color: red ! important}. 在XML1.0[XML10]中，关于那个属性包含一个元素ID的信息被放在一个DTD文件中。当解析XML时，浏览器不会总去读取DTD，因此可能会不知道一个元素的ID是什么。如果样式表的设计者知道或者怀疑存在这样一种情况，他可以使用普通的属性选择器来进行替换：[name=p371] 替换 #p371。然而，属性选择器的规则会与ID选择器有所不同。所以我们有必要添加"!important"来强调这个声明块：[name=p371] {color: red ! important}。 If an element has multiple ID attributes, all of them must be treated as IDs for that element for the purposes of the ID selector. Such a situation could be reached using mixtures of xml:id [XMLID], DOM3 Core [DOM-LEVEL-3-CORE], XML DTDs [XML10] and namespace-specific knowledge. 如果一个元素拥有多个ID属性，那么对于ID选择器所有的ID属性都将被作为元素的唯一标识符。这种情况被用在混合混合xml:id [XMLID]，DOM3 Core [DOM-LEVEL-3-CORE], XML DTDs [XML10] and 特殊命名空间语法中。 5.10 Pseudo-elements and pseudo-classes 伪元素和伪类 In CSS 2.1, style is normally attached to an element based on its position in the document tree. This simple model is sufficient for many cases, but some common publishing scenarios may not be possible due to the structure of the document tree. For instance, in HTML 4 (see [HTML4]), no element refers to the first line of a paragraph, and therefore no simple CSS selector may refer to it. 在CSS2.1中，添加到元素的样式一般与它在文档树中的位置有关。这个简单模式足以处理大多数情况，但是在一些普通的出版场景，由于文档树的结构因素，可能处理不了这种情况所产生的问题。例如，在HTML 4中(查看 [HTML4])，没有元素可以引用一段的第一行，因此没有简单的CSS 选择器来引用它。 CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree. CSS引入了伪元素和伪类，它们可以在文档树来外格式化信息。

• Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element's content. CSS pseudo-elements allow style sheet designers to refer to this otherwise inaccessible information. Pseudo-elements may also provide style sheet designers a way to assign style to content that does not exist in the source document (e.g., the :before and :after pseudo-elements give access to generated content). 在文档语言规定之外，伪元素创建了一个关于文档树的抽象引用。例如，文档语言不提供访问一个元素内容第一个字符或者第一行的机制。但是除了一些很难实现的信息，CSS伪类允许样式设计者这样引用。同时伪元素也为样式设计者提供了一种为内容添加样式的方式，这些内容可以不在源文档中（例如, :before 和 :after可以生成内容）。
• Pseudo-classes classify elements on characteristics other than their name, attributes or content; in principle characteristics that cannot be deduced from the document tree. Pseudo-classes may be dynamic, in the sense that an element may acquire or lose a pseudo-class while a user interacts with the document. The exceptions are ':first-child', which can be deduced from the document tree, and ':lang()', which can be deduced from the document tree in some cases. 伪类除了可以在名称，属性，内容上划分元素，还可以通过特性来划分元素；大多数特性并不是通过文档树生成。伪元素可以使动态的，按这种意义来说，当用户与文档进行交互时，元素可能会获得或失去某个伪类。':first-child'伪类除外，因为该伪类是由文档树生成的，再就是':lang()'伪类，在某些情况下，':lang()'伪类也由文档树所生成。

Neither pseudo-elements nor pseudo-classes appear in the document source or document tree. 伪元素和伪类都不会出现在源文档或文档树中。 Pseudo-classes are allowed anywhere in selectors while pseudo-elements may only be appended after the last simple selector of the selector. 伪类可以出现在选择器的任何地方，但是伪元素只能出现在一个选择器的最后简单选择器的后面。 Pseudo-element and pseudo-class names are case-insensitive. 伪元素和伪类的名称都不区分大小写。 Some pseudo-classes are mutually exclusive, while others can be applied simultaneously to the same element. In case of conflicting rules, the normal cascading order determines the outcome. 当一些伪类同时应用在一个元素上时，它们的作用有些可能会互相排斥。当发生这种冲突的时候，普通的样式将会决定最后显示的结果。 5.11 Pseudo-classes 伪类 5.11.1 :first-child pseudo-class :first-child伪类 The :first-child pseudo-class matches an element that is the first child element of some other element. :first-child伪类匹配某个元素的第一个子元素。 Example(s): In the following example, the selector matches any P element that is the first child of a DIV element. The rule suppresses indentation for the first paragraph of a DIV: 下面的例子中，这个选择器匹配一个DIV元素的首个子元素P。这条规则取消了DIV元素的首个子元素P的缩进： div > p:first-child { text-indent: 0 } This selector would match the P inside the DIV of the following fragment: 这个选择器将匹配下面代码块中DIV元素内部的P元素： <P> The last P before the note. <DIV class="note"> <P> The first P inside the note. </DIV> but would not match the second P in the following fragment: 但是不会匹配代码块中的第二个P元素： <P> The last P before the note. <DIV class="note"> <H2>Note</H2> <P> The first P inside the note. </DIV> Example(s): The following rule sets the font weight to 'bold' for any EM element that is some descendant of a P element that is a first child: 下面的规则设置每个EM元素的字体为'bold'，被设置的EM元素必须是某个P元素的首个子元素： p:first-child em { font-weight : bold } Note that since anonymous boxes are not part of the document tree, they are not counted when calculating the first child. 说明：因为匿名合资不是文档树的一部分，所以它们不会被当做第一个子元素。 For example, the EM in: 例如，下面的EM元素： <P>abc <EM>default</EM> is the first child of the P. 是P元素的第一个子元素。 The following two selectors are equivalent: 下面的两个选择器是等价的： * > a:first-child   /* A is first child of any element */ a:first-child       /* Same */ 5.11.2 The link pseudo-classes: :link and :visited 伪类:link 和 :visited User agents commonly display unvisited links differently from previously visited ones. CSS provides the pseudo-classes ':link' and ':visited' to distinguish them: 一般情况下，对于没有访问的链接和已访问的链接浏览器显示是不一样的。CSS提供了':link' 和 ':visited'伪类区分它们：

• The :link pseudo-class applies for links that have not yet been visited. :link伪类 被应用在没有被访问过的超链接上。
• The :visited pseudo-class applies once the link has been visited by the user. :visited伪类被应用在已被访问过的超链接上。

UAs may return a visited link to the (unvisited) ':link' state at some point. 某些时候，对于':link'状态伪类浏览器可能会返回一个已被访问过超链接 The two states are mutually exclusive. 两种状态时相互排斥的。 The document language determines which elements are hyperlink source anchors. For example, in HTML4, the link pseudo-classes apply to A elements with an "href" attribute. Thus, the following two CSS 2.1 declarations have similar effect: 文档语言决定了那个元素是超链接的来源锚元素。例如，在HTML5中，link伪类会被应用到拥有"href"属性的A元素上面。因此，下面的两个CSS 2.1声明效果一样： a:link { color: red } :link  { color: red } Example(s): If the following link: 如果下面的link： <A class="external" href="http://out.side/">external link</A> has been visited, this rule: 已经被访问过，下面的规则： a.external:visited { color: blue } will cause it to be blue. 将会是它颜色变蓝。 Note. It is possible for style sheet authors to abuse the :link and :visited pseudo-classes to determine which sites a user has visited without the user's consent. 说明：在没有经过用户同意的情况下，对于一些样式设计者可能会滥用:link 和 :visited伪类来决定显示那些已被访问过站点。 UAs may therefore treat all links as unvisited links, or implement other measures to preserve the user's privacy while rendering visited and unvisited links differently. See [P3P] for more information about handling privacy. 当渲染已访问和未访问的超链接表现不一样时，浏览器可能会把所有超链接当做未被访问过的超链接来处理，或者通过其他实现措施来保护用户的隐私。 5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus 动态伪类 :hover, :active, 和 :focus Interactive user agents sometimes change the rendering in response to user actions. CSS provides three pseudo-classes for common cases: 在响应用户的行为时，交互浏览器有时会改变某些元素的显示样式。CSS为处理大多数情况提供了三个伪类：

• The :hover pseudo-class applies while the user designates an element (with some pointing device), but does not activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element. User agents not supporting interactive media do not have to support this pseudo-class. Some conforming user agents supporting interactive media may not be able to support this pseudo-class (e.g., a pen device). :hover伪类被应用在当用户指定了一个元素但是却没有激活它的时候。例如：对于可视化浏览器，当鼠标指针经过某个元素生成的盒子时，该元素的这种情况便可以应用:hover伪类。不支持交互式媒体的浏览器不支持这些伪类。一些标准浏览器支持交互式媒体但是却不支持这些伪类（例如，一个手写设备）
• The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it. :active伪类被应用在当一个元素将要被用户激活的时候。例如，在用户按下鼠标之后和释放鼠标之前的这段时间，将会触发:active伪类。
• The :focus pseudo-class applies while an element has the focus (accepts keyboard events or other forms of text input). : focus伪类被应用在当一个元素获得焦点的时候。（可以响应键盘事件的元素或者表单的文本框）

An element may match several pseudo-classes at the same time. 一个元素可以同时匹配多个伪类。 CSS does not define which elements may be in the above states, or how the states are entered and left. Scripting may change whether elements react to user events or not, and different devices and UAs may have different ways of pointing to, or activating elements. CSS没有定义那些元素可以响应上述状态或者这些状态怎么进入和离开。脚本可以改变这些元素是否响应用户事件，不同设备和浏览器可能会有不同的方式来指明或激活某些元素。 CSS 2.1 does not define if the parent of an element that is ':active' or ':hover' is also in that state. CSS 2.1 没有定义如果一个元素处于':active' 或 ':hover'状态，其父元素是否也在处于同样的状态。 User agents are not required to reflow a currently displayed document due to pseudo-class transitions. For instance, a style sheet may specify that the 'font-size' of an :active link should be larger than that of an inactive link, but since this may cause letters to change position when the reader selects the link, a UA may ignore the corresponding style rule. 伪类可能会使元素的样式有些改变，但是此时浏览器不需要重新加载当前显示的文档。例如，一个样式可能指定某个激活状态的超链接字体大于未被激活的超链接字体，当用户选择这些超链接时，这些字体的位置可能会改变，此时浏览器会忽略相应的样式规则。 Example(s): a:link    { color: red }    /* unvisited links */ a:visited { color: blue }   /* visited links   */ a:hover   { color: yellow } /* user hovers     */ a:active  { color: lime }   /* active links    */ Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the 'color' property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element. 说明：A:hover一定要放在A:link 和 A:visited的后面，因为其他的样式会覆盖A:hover样式的'color'属性。同样，A:active要放在A:hover后面，所以A:active 也要放在A:link 和 A:visited后面。 Example(s): An example of combining dynamic pseudo-classes: 一个结合了动态伪类的例子： a:focus { background: yellow } a:focus:hover { background: white } The last selector matches A elements that are in pseudo-class :focus and in pseudo-class :hover. 最后一个选择器将匹配处于伪类:focus和:hover状态时的A元素。 For information about the presentation of focus outlines, please consult the section on dynamic focus outlines. 关于焦点大小的描述信息，请参阅dynamic focus outlines。 Note. In CSS1, the ':active' pseudo-class was mutually exclusive with ':link' and ':visited'. That is no longer the case. An element can be both ':visited' and ':active' (or ':link' and ':active') and the normal cascading rules determine which style declarations apply. 说明：在CSS1中，':active'与':link' 和 ':visited'功能相斥。现在不会有这种情况了，一个元素可以同时拥有':visited' 和 ':active'（或者':link' 和 ':active'）伪类，普通的样式规则就可以会决定那种状态应用那个样式。 Note. Also note that in CSS1, the ':active' pseudo-class only applied to links. 说明：在CSS1中，':active'伪类只可以被应用在超链接中。 5.11.4 The language pseudo-class: :lang :lang语言伪类 If the document language specifies how the human language of an element is determined, it is possible to write selectors in CSS that match an element based on its language. For example, in HTML [HTML4], the language is determined by a combination of the "lang" attribute, the META element, and possibly by information from the protocol (such as HTTP headers). XML uses an attribute called xml:lang, and there may be other document language-specific methods for determining the language. The pseudo-class ':lang(C)' matches if the element is in language C. Whether there is a match is based solely on the identifier C being either equal to, or a hyphen-separated substring of, the element's language value, in the same way as if performed by the '|=' operator. The matching of C against the element's language value is performed case-insensitively for characters within the ASCII range. The identifier C does not have to be a valid language name. C must not be empty. Note: It is recommended that documents and protocols indicate language using codes from BCP 47 [BCP47] or its successor, and by means of "xml:lang" attributes in the case of XML-based documents [XML10]. See "FAQ: Two-letter or three-letter language codes." Example(s): The following rules set the quotation marks for an HTML document that is either in Canadian French or German: html:lang(fr-ca) { quotes: '« ' ' »' } html:lang(de) { quotes: '»' '«' '\2039' '\203A' } :lang(fr) > Q { quotes: '« ' ' »' } :lang(de) > Q { quotes: '»' '«' '\2039' '\203A' } The second pair of rules actually set the 'quotes' property on Q elements according to the language of its parent. This is done because the choice of quote marks is typically based on the language of the element around the quote, not the quote itself: like this piece of French “à l'improviste” in the middle of an English text uses the English quotation marks. Note the difference between [lang|=xx] and :lang(xx). In this HTML example, only the BODY matches [lang|=fr] (because it has a LANG attribute) but both the BODY and the P match :lang(fr) (because both are in French). <body lang=fr> <p>Je suis Français.</p> </body> 5.12 Pseudo-elements 伪元素 Pseudo-elements behave just like real elements in CSS with the exceptions described below and elsewhere. 伪元素的行为与除了下面所描述之外的CSS中的真实元素非常相似。 5.12.1 The :first-line pseudo-element :first-line伪元素 The :first-line pseudo-element applies special styles to the contents of the first formatted line of a paragraph. For instance: :first-line伪元素可以应用指定的样式到某个段落的第一行内容。例如： p:first-line { text-transform: uppercase } The above rule means "change the letters of the first line of every paragraph to uppercase". However, the selector "P:first-line" does not match any real HTML element. It does match a pseudo-element that conforming user agents will insert at the beginning of every paragraph. 上面的规则使每个段落的第一行字母都变为大写。然而，这个选择器"P:first-line"不能够匹配所有HTML元素，它只能匹配标准浏览器插入到每个段落开始位置的一个伪元素。 Note that the length of the first line depends on a number of factors, including the width of the page, the font size, etc. Thus, an ordinary HTML paragraph such as: 注意第一行的长度取决于如干个因素，包括页面的宽度，字体的大小，等等。因此，一个普通的段落像这样： <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> the lines of which happen to be broken as follows: 第一行内容将被显示成下面这个样子： 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. might be "rewritten" by user agents to include the fictional tag sequence for :first-line. This fictional tag sequence helps to show how properties are inherited. 该行内容将被包含: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> If a pseudo-element breaks up a real element, the desired effect can often be described by a fictional tag sequence that closes and then re-opens the element. Thus, if we mark up the previous paragraph with a SPAN element: 如果一个伪元素打碎了一个真实元素，一般会使用一个有序的闭合虚拟标签来描述我们想要看到的效果。因此，如果我们使用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> the user agent could simulate start and end tags for SPAN when inserting the fictional tag sequence for :first-line. 当为: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> The :first-line pseudo-element can only be attached to a block container element. :first-line伪元素只可以被应用在一个包含快元素中。 The "first formatted line" of an element may occur inside a block-level descendant in the same flow (i.e., a block-level descendant that is not positioned and not a float). E.g., the first line of the DIV in <DIV><P>This line...</P></DIV> is the first line of the P (assuming that both P and DIV are block-level). 在同一个文档流中，一个元素的首个格式化行元素可能出现在一个块级后代元素中。（也就是一个没有定位及浮动的块级后代元素）。例如，<DIV><P>This line...</P></DIV> 中DIV元素的第一行就是P元素的第一行（假设P和DIV都是块级元素）。 The first line of a table-cell or inline-block cannot be the first formatted line of an ancestor element. Thus, in <DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV> the first formatted line of the DIV is not the line "Hello". 一个table-cell 或 inline-block元素的首个格式化行元素不会是其父元素的第一行。因此，在代码<DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV>中，DIV元素的首个格式化行元素将不是"Hello" Note that the first line of the P in this fragment: <p><br>First... does not contain any letters (assuming the default style for BR in HTML 4). The word "First" is not on the first formatted line. 注意<p><br>First...代码片段中P元素的第一行不包含任何字符（假设BR默认样式为HTML4中的默认样式）。单词"First"不是P元素的首个格式化行元素。 A UA should act as if the fictional start tags of the first-line pseudo-elements were nested just inside the innermost enclosing block-level element. (Since CSS1 and CSS2 were silent on this case, authors should not rely on this behavior.) Here is an example. The fictional tag sequence for 浏览器会认为first-line伪元素的虚拟起始标签会嵌入在一个闭合块级元素的最里面。（这种情况CSS1和CSS2并没有做出明确的规定，所以某些作者可能会不信任这种处理方式）。这里有一个例子，有序的虚拟标签： <DIV> <P>First paragraph</P> <P>Second paragraph</P> </DIV> is  是 <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> The :first-line pseudo-element is similar to an inline-level element, but with certain restrictions. The following properties apply to a :first-line pseudo-element: font properties, color property, background properties, 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform', 'line-height',. UAs may apply other properties as well. :first-line伪元素与inline-level元素相似，但是有某些限制。下面的属性可以应用在:first-line伪元素上：font properties, color property, background properties, 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform', 'line-height',。浏览器同样可以应用其他属性。 5.12.2 The :first-letter pseudo-element  :first-letter伪元素 The :first-letter pseudo-element must select the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line. The :first-letter pseudo-element may be used for "initial caps" and "drop caps", which are common typographical effects. This type of initial letter is similar to an inline-level element if its 'float' property is 'none', otherwise it is similar to a floated element. 如果某个块元素的第一行的前面没有添加任何内容（比如图片或内联表格），那么应用在该块元素的:first-letter伪元素一定会选择这一行的第一个字母。对于一些普通的印刷效果，我们可以使用:first-letter伪元素首字母大写或者首字母下沉。首字母大写的类型与'float'属性为'none'的inline-level元素或者一个浮动元素相似。 These are the properties that apply to :first-letter pseudo-elements: font properties, 'text-decoration', 'text-transform', 'letter-spacing', 'word-spacing' (when appropriate), 'line-height', 'float', 'vertical-align' (only if 'float' is 'none'), margin properties, padding properties, border properties, color property, background properties. UAs may apply other properties as well. To allow UAs to render a typographically correct drop cap or initial cap, the UA may choose a line-height, width and height based on the shape of the letter, unlike for normal elements. CSS3 is expected to have specific properties that apply to first-letter. :first-letter伪元素可以应用以下属性：font properties, 'text-decoration', 'text-transform', 'letter-spacing', 'word-spacing' (when appropriate), 'line-height', 'float', 'vertical-align' (only if 'float' is 'none'), margin properties, padding properties, border properties, color property, background properties.浏览器可能会应用其他属性在该伪元素上。想要以正确印刷格式渲染一个首字母大写或者首字母下沉，浏览器需要为这个字母设置一个与其他普通元素不同的横高，宽度和高度。CSS3有望为first-letter添加一些特殊属性。 This example shows a possible rendering of an initial cap. Note that the 'line-height' that is inherited by the first-letter pseudo-element is 1.1, but the UA in this example has computed the height of the first letter differently, so that it does not cause any unnecessary space between the first two lines. Also note that the fictional start tag of the first letter is inside the SPAN, and thus the font weight of the first letter is normal, not bold as the SPAN: 下面的展示了正确渲染首字母大写的例子。注意first-letter 伪元素继承了其父元素'line-height'属性1.1，但是在下面的例子中，浏览器计算出的第一个字母的高度与定义的高度有所不同，这是为了在第一行和第二行之间不产生不必要的空格。 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. The following CSS 2.1 will make a drop cap initial letter span about two lines: 下面代码将在第一行和第二行之间生成一个下沉的首字母： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HTML> <HEAD> <TITLE>Drop cap initial letter</TITLE> <STYLE> 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> This example might be formatted as follows: 这个例子将被格式化为： [D] The fictional tag sequence is: 虚拟标签： <P> <SPAN> <P:first-letter> T </P:first-letter>he first </SPAN> few words of an article in the Economist. </P> Note that the :first-letter pseudo-element tags abut the content (i.e., the initial character), while the :first-line pseudo-element start tag is inserted right after the start tag of the block element. 注意当:first-line伪元素的起始标签被插入到块元素起始标签右侧时，伪元素:first-letter的标签将紧靠它内容部分。 In order to achieve traditional drop caps formatting, user agents may approximate font sizes, for example to align baselines. Also, the glyph outline may be taken into account when formatting. 为了实现一个普通首字母下沉的格式化，浏览器可能会粗略估计字体的大小，例如与基线对齐。另外，当格式化时也会考虑字体的轮廓。 Punctuation (i.e, characters defined in Unicode [UNICODE] in the "open" (Ps), "close" (Pe), "initial" (Pi). "final" (Pf) and "other" (Po) punctuation classes), that precedes or follows the first letter should be included, as in: 若果一个标点在第一个字母之前，那么标点和字母都将做为:first-letter，就像： [D] The ':first-letter' also applies if the first letter is in fact a digit, e.g., the "6" in "67 million dollars is a lot of money." 如果第一个字母是数字，':first-letter'将选择第一个数字。例如，"67 million dollars is a lot of money."中的"6"将是':first-letter'。 The :first-letter pseudo-element applies to block container elements. The :first-letter pseudo-element can be used with all such elements that contain text, or that have a descendant in the same flow that contains text. A UA should act as if the fictional start tag of the first-letter pseudo-element is just before the first text of the element, even if that first text is in a descendant. :first-letter伪元素应用在块级包含元素上。当这些元素包含文本或者在同一个文档流中有一个包含文本的后代元素，:first-letter伪元素便可以应用到这些元素上。浏览器会认为first-letter伪元素的首个虚拟标签在某个元素的第一个字符之前，即使该字符出现在该元素的一个后代元素中。 Example(s): Here is an example. The fictional tag sequence for this HTML fragment: 这里有一个例子。关于HTML代码块的虚拟标签： <div> <p>The first text. is: <div> <p><div:first-letter><p:first-letter>T</...></...>he first text. The first letter of a table-cell or inline-block cannot be the first letter of an ancestor element. Thus, in <DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV> the first letter of the DIV is not the letter "H". In fact, the DIV does not have a first letter. 某个table-cell 或 inline-block元素的首字母不会是其父元素first-letter。因此，在代码块<DIV><P STYLE="display: inline-block">Hello<BR>Goodbye</P> etcetera</DIV>中，DIV中的首字母将不是"H"。事实上，DIV不存在首字母。 The first letter must occur on the first formatted line. For example, in this fragment: <p><br>First... the first line does not contain any letters and ':first-letter' does not match anything (assuming the default style for BR in HTML 4). In particular, it does not match the "F" of "First." 首字母必须出现在格式化的第一个行中。例如，下面的代码块：<p><br>First...第一行不包含任何字符，所以':first-letter'将什么都不会匹配。（BR是HTML4中的默认样式）。它也不会匹配"First."中的"F"。 If an element is a list item ('display: list-item'), the ':first-letter' applies to the first letter in the principal box after the marker. UAs may ignore ':first-letter' on list items with 'list-style-position: inside'. If an element has ':before' or ':after' content, the ':first-letter applies to the first letter of the element including that content. 如果是一个list item元素（“display属性为list-item”），':first-letter'将被应用在主盒子的第一个字母上。浏览器会忽略拥有'list-style-position: inside'属性的list item元素的':first-letter'。如果一个元素用有':before' 或 ':after'内容，应用在该元素的:first-letter的首字母将包含这部分内容。 E.g., after the rule 'p:before {content: "Note: "}', the selector 'p:first-letter' matches the "N" of "Note". 举例来说，应用这条规则'p:before {content: "Note: "}'之后，选择器'p:first-letter'将匹配"Note"中的"N"。 Some languages may have specific rules about how to treat certain letter combinations. In Dutch, for example, if the letter combination "ij" appears at the beginning of a word, both letters should be considered within the :first-letter pseudo-element. 一些语言可能有特殊的规则来处理某些组合字母。 例如，如果一个组合字母"ij"出现在了一个单词的开始部分，这两个字母都将被认为在:first-letter伪元素中。 If the letters that would form the first-letter are not in the same element, such as "'T" in <p>'<em>T..., the UA may create a first-letter pseudo-element from one of the elements, both elements, or simply not create a pseudo-element. 如果组成首字母的单词没有在同一个元素内，就像<p>'<em>T...中的"'T"，浏览器可以在其中的一个或者两个元素来创建一个first-letter伪元素，或者根本不创建伪元素。 Similarly, if the first letter(s) of the block are not at the start of the line (for example due to bidirectional reordering), then the UA need not create the pseudo-element(s). 同样，如果块元素的首字母不是一行的起始部分（例如由于双向布局），那么浏览器将不能创建伪元素。 Example(s): The following example illustrates how overlapping pseudo-elements may interact. The first letter of each P element will be green with a font size of '24pt'. The rest of the first formatted line will be 'blue' while the rest of the paragraph will be 'red'. 下面的例子阐明了重叠的伪元素是怎样相互影响的。每个P元素的第一个字母将是'24pt'大小的绿色字体。第一行中的剩余部分的字体颜色为绿色，除了第一行该段落剩余部分的字体将是红色。 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> Assuming that a line break will occur before the word "ends", the fictional tag sequence for this fragment might be: 假定字符"ends"前面有回车换行，那么下面代码片段中的虚拟标签将表示成： <P> <P:first-line> <P:first-letter> S </P:first-letter>ome text that </P:first-line> ends up on two lines </P> Note that the :first-letter element is inside the :first-line element. Properties set on :first-line are inherited by :first-letter, but are overridden if the same property is set on :first-letter. 注意:first-letter元素在:first-line元素内部。:first-letter元素将会继承:first-line中已定义的属性，但是对于相同属性，:first-letter中所定义将会覆盖其父元素中定义的。 5.12.3 The :before and :after pseudo-elements  :before 和 :after 伪元素 The ':before' and ':after' pseudo-elements can be used to insert generated content before or after an element's content. They are explained in the section on generated text. ':before' 和 ':after'伪元素将被用于插入所生成的内容到一个元素内容部分的前面或后面。在生成文本这一章中会有详细介绍。 Example(s): h1:before {content: counter(chapno, upper-roman) ". "} When the :first-letter and :first-line pseudo-elements are applied to an element having content generated using :before and :after, they apply to the first letter or line of the element including the generated content. 当:first-letter 和 :first-line伪元素被应用于带有:before 和 :after生成内容的元素时，他们的首字母或首行将包含这些生成内容。 Example(s): p.special:before {content: "Special! "} p.special:first-letter {color: #ffd800} This will render the "S" of "Special!" in gold. 这将把"Special!"中的"S"渲染为金色。
说明：本站所有W3C翻译文稿皆为原创，如果转载，请大家注明出处，谢谢。

---