本文详细介绍了CSS选择器的各种类型，包括类型选择器、通配符选择器、属性选择器、类选择器、ID选择器、伪类和伪元素等。这些选择器用于匹配文档树中的元素，实现精确的样式应用。文中还探讨了命名空间、动态伪类、结构伪类以及如何处理元素的空内容。通过示例展示了如何在CSS中使用这些选择器，以达到预期的样式效果。
目录：
- 简介
1.1. 依赖
1.2. 关键词
1.3. 来自CSS2更改 - 选择器
- 大小写敏感
- 选择器语法
- 组合选择器
- 简单选择器
6.1. 类型选择器
6.1.1. 类型选择器和命名空间
6.2. 通配符选择器
6.2.1. 通配符选择器和命名空间
6.3. 属性选择器
6.3.1. 属性存在和值选择器
6.3.2. 匹配属性选择器的子字符串
6.3.3. 属性选择器和命名空间
6.3.4. dtd中的默认属性值
6.4. class选择器
6.5. id选择器
6.6. 伪类选择器
6.6.1. 动态伪类
6.6.1.1. 链接跳转类选择器
6.6.1.2. 用户动作伪类
6.6.2. 目标伪类
6.6.3. 语言伪类
6.6.4. ui元素伪类
6.6.4.1. enabled、disabled伪类
6.6.4.2. checked伪类
6.6.4.3. indeterminate伪类
6.6.5. 结构伪类
6.6.5.1. root伪类
6.6.5.2. nth-child伪类
6.6.5.3. nth-last-child伪类
6.6.5.4. nth-of-type伪类
6.6.5.5. nth-last-of-type伪类
6.6.5.6. first-child伪类
6.6.5.7. last-child伪类
6.6.5.8. first-of-type伪类
6.6.5.9. last-of-type伪类
6.6.5.10. only-child伪类
6.6.5.11. only-of-type伪类
6.6.5.12. empty伪类
6.6.6. Blank
6.6.7. 否定伪类 - 伪元素
7.1. first-line伪元素
7.1.1. 格式化第一行
7.2. first-letter伪元素
7.2.1. 应用程序的CSS
7.3. Blank
7.4. before after伪元素 - 关系选择器
8.1. 后代选择器
8.2. 子代选择器
8.3. 兄弟选择器
8.3.1. 相邻兄弟选择器
8.3.2. 一般兄弟选择器 - 计算选择器的特异性
- 选择器的语法
10.1. 语法
10.2. 拼写检查 - 配置文件
- 通用要求和一致性测试
- 测试
- 致谢
- 参考文献
15.1. 引用类文献
15.2. 参考类文献
正文
1 简介
level 1和clevel 2分别定义为CSS1和CSS2.1规范中定义的选择器功能的子集。
1.1. 依赖
本规范的一些特性是特定于CSS的,或者对CSS有特定的限制或规则。在本规范中，已经用CSS2.1进行了描述。
1.2. 选择器
本规范示例、注释和明确标记为非规范，其他所有文本都是规范的。
其他的术语被定义在CSS2.1的定义部分。在XML [XML10]或HTML [HTML40]语法中给出了文档源代码和片段的示例。
1.3. 来自CSS2更改
本节是非规范的。
CSS2中的选择器和选择器中的选择器的主要区别是:
- 基本定义列表(选择器、选择器组、简单选择器等)已被更改;特别是，在CSS2中称为简单选择器的东西现在称为简单选择器序列，术语“简单选择器”现在用于该序列的组件
- 现在在元素类型选择器、通用选择器和属性选择器中都允许使用可选的命名空间组件
- 介绍了一种新的组合子
- 新的简单选择器，包括子字符串匹配属性选择器，以及新的伪类
- 新的伪元素，并引入了伪元素的"::"约定
- 语法已被改写
- 要添加到规范中的概要文件集成了选择器，并定义了每个规范实际支持的一组选择器
- 选择器现在是一个CSS3模块和一个独立的规范;其他规范现在可以独立于CSS参考本文档
- 该规范现在有了自己的测试套件
2 选择器
本节是非规范的，因为它只是总结了以下各节。
选择器表示一个结构。该结构可以用作一个条件(例如在CSS规则中)，决定选择器在文档树中匹配哪些元素，或者作为与该结构相对应的HTML或XML片段的扁平描述。
选择器可以从简单的元素名称到丰富的上下文表示形式。
下表总结了选择器的语法:
| 模式 | 含义 | 定义初版 | 备注 |
|---|---|---|---|
| * | 通配选择器 匹配所有的html元素 | 2 | |
| E | 元素选择器 匹配指定html元素 例如 p标签 | 1 | |
| E[foo] | 属性选择器 匹配具有特定属性的指定标签 | 2 | |
| E[foo=“bar”] | 匹配指定属性为指定属性值的指定标签 | 2 | |
| E[foo~=“bar”] | 待定 | 2 | |
| E[foo^=“bar”] | 待定 | 3 | |
| E[foo$=“bar”] | 待定 | 3 | |
| E[foo*=“bar”] | 待定 | 3 | |
| E[foo|=“en”] | 待定 | 2 | |
| E:root | 文档根元素的伪类 | 3 | |
| E:nth-child(n) | 选定E的第几个子代元素 | 3 | |
| E:nth-last-child(n) | 选定E的倒数第几个 | 3 | |
| E:nth-of-type(n) | 选定E的第几个兄弟元素 | 3 | |
| E:nth-last-of-type(n) | 选定E的倒数第几个 | 3 | |
| E:first-child | 选定E的第一个儿子 | 2 | |
| E:last-child | 选定E的倒数第一个儿子 | 3 | |
| E:first-of-type | 待定 | 3 | |
| E:last-of-type | 待定 | 3 | |
| E:only-child | 选定E的唯一一个儿子 | 3 | |
| E:only-of-type | 选定E的唯一个一个兄弟 | 3 | |
| E:empty | 选定E的空元素 | 3 | |
| E:link | 选定超链接未被访问的状态 | 1 | |
| E:visited | 选定超链接已被访问的状态 | 1 | |
| E:active | 待定 | 1 & 2 | |
| E:hover | 待定 | 1 & 2 | |
| E:focus | 待定 | 1 & 2 | |
| E:target | 指定URI的元素 | 3 | |
| E:lang(fr) | 待定 | 2 | |
| E:enabled | 选定未禁用的元素 | 3 | |
| E:disabled | 选定禁用的元素 | 3 | |
| E:checked | 匹配指定带有checked属性的元素 | 3 | |
| E:not(s) | 待定 | 3 | |
| E::first-line | 选定第一行 | 1 | |
| E::first-letter | 选定第一个字母 | 1 | |
| E::before | 元素之前的伪类 | 2 | |
| E::after | 元素之后的伪类 | 2 | |
| E.warning | 待定 | 1 | |
| E#myid | 待定 | 1 | |
| E F | 待定 | 1 | |
| E > F | 待定 | 2 | |
| E + F | 待定 | 2 | |
| E ~ F | 待定 | 3 |
3 大小写敏感
在ASCII范围内，所有选择器语法都是不区分大小写的(即[a-z]和[A-Z]是等效的)，除了不受选择器控制的部分。选择器中文档语言元素名、属性名和属性值的大小写敏感性取决于文档语言。例如，在HTML中，元素名是不区分大小写的，但在XML中，它们是区分大小写的。命名空间前缀的大小写敏感性在CSS3NAMESPACE中定义。
4 选择器语法
选择器是由一个或多个由组合符分隔的简单选择器序列组成的链。在选择器中，一个伪元素可以添加到简单选择器的最后一个序列中。
一个简单选择符序列是一个简单选择符链，它不是由一个组合符分隔的。它总是以类型选择器或通用选择器开始。序列中不允许有其他类型选择器或通用选择器。
简单的选择器可以是类型选择器，通用选择器，属性选择器，类选择器，ID选择器，或者伪类选择器。
组合符有:空格、大于号(U+003E， >)、加号(U+002B， +)和波浪号(U+007E， ~)。空格可能出现在一个组合符和它周围的简单选择符之间。只有字符“空格”(U+0020)、“制表符”(U+0009)、“换行”(U+000A)、“回车”(U+000D)和“换表”(U+000C)可以出现在空白中。其他类似空格的字符，例如“em-space”(U+2003)和“表意空间”(U+3000)，从来都不是空格的一部分。
由选择器表示的文档树的元素是选择器的主题。由单个简单选择器序列组成的选择器表示任何满足其要求的元素。在序列前加上另一个简单选择器序列和一个组合子会增加匹配约束，因此选择器的主题总是由最后一个简单选择器序列所表示的元素的子集。
空选择器，不包含简单选择器序列和伪元素，是无效的选择器。
选择器中的字符可以根据与CSS相同的转义规则用反斜杠进行转义。[CSS21]。
某些选择器支持命名空间前缀。命名空间前缀的声明机制应该由使用选择器的语言指定。如果语言没有指定命名空间前缀声明机制，那么就不声明前缀。在CSS中，命名空间前缀使用@namespace规则声明。[CSS3NAMESPACE]
5 组合选择器
用逗号分隔的选择器列表表示列表中每个选择器所选择的所有元素的并集。(逗号是U+002C)例如，在CSS中，当几个选择器共享相同的声明时，它们可以被分组到一个逗号分隔的列表中。空格可以出现在逗号的前面和/或后面。
CSS example:
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 }
警告:这个例子中的等价性为真，因为所有的选择器都是有效的选择器。如果这些选择器中只有一个是无效的，那么整个选择器组也是无效的。这将使所有三个标题元素的规则失效，而在前一种情况下，三个单独的标题规则中只有一个将失效。
Invalid CSS example:
h1 { font-family: sans-serif }
h2..foo { font-family: sans-serif }
h3 { font-family: sans-serif }
is not equivalent to:
h1, h2..foo, h3 { font-family: sans-serif }
because the above selector (h1, h2..foo, h3) is entirely invalid and the entire style rule is dropped. (When the selectors are not grouped, only the rule for h2..foo is dropped.)
6 简单选择器
6.1 类型选择器 (总结)
A type selector is the name of a document language element type written using the syntax of CSS qualified namesCSS3NAMESPACE. A type selector represents an instance of the element type in the document tree.
?类型选择器又叫元素选择器，顾名思义这里指的就是文档语言中规定的元素，这个选择器就是用来选中这些标签的，还是比较常用的。
类型选择器是使用CSS限定名CSS3NAMESPACE的语法编写的文档语言元素类型的名称。类型选择器表示文档树中元素类型的一个实例。
下面的选择器表示文档树中的h1元素:
h1
6.1.1 类型选择器和命名空间 (总结)
类型选择器应该使用文档语言中已经命名的空间组件，之前声明过的命名可以使用万国码中的竖线 | 来进行分隔（具体参阅XML命名）
命名空间组件可以为空(命名空间分隔符之前没有前缀)，以指示选择器只表示没有命名空间的元素。
星号可以用于命名空间前缀，表示选择器表示任何命名空间中的元素(包括没有命名空间的元素)。
没有命名空间组件(没有命名空间分隔符)的元素类型选择器表示元素时不考虑元素的命名空间(相当于“*|”)，除非已经为带有命名空间的选择器声明了默认命名空间(例如在CSS中，在样式表中)。如果已经声明了默认命名空间，那么这样的选择器将只表示默认命名空间中的元素。
类型选择器包含先前未为带命名空间的选择器声明的命名空间前缀，是无效的选择器。
在支持命名空间的客户机中，元素类型选择器的名称部分(命名空间分隔符之后的部分，如果存在的话)将只匹配元素限定名的本地部分。
总而言之:
ns|E 命名空间ns中名称为E的元素
|E 在任何命名空间中具有名称E的元素，包括那些没有命名空间的元素
|E 名称为E但没有命名空间的元素
E 如果没有为选择器声明默认命名空间，这相当于|E。否则，它等价于ns|E，其中ns是默认命名空间。
命名空间的基本使用方法
@namespace foo url(http://www.example.com);
foo|h1 { color: blue } /*只匹配"http://www.example.com"命名空间中的h1元素。*/
foo|* { color: yellow } /*匹配“http://www.example.com”命名空间中的所有元素。*/
|h1 { color: red } /*只匹配没有命名空间的h1元素。*/
*|h1 { color: green } /*匹配任何命名空间中的h1元素(包括那些没有命名空间的元素)。*/
h1 { color: green } /*没有定义默认命名空间。等价于 *|h1*/
6.2 通配符选择器
通用选择器以CSS限定名[CSS3NAMESPACE]的形式编写，并用星号(* U+002A)作为本地名称，表示任何元素类型的限定名。如果没有为选择器指定默认命名空间，它表示任何命名空间(包括没有命名空间的命名空间)中文档树中的任何单个元素。如果指定了默认命名空间，请参阅下面的Universal selector和Namespaces。
如果一个用表示的通用选择器(即没有命名空间前缀的选择器)不是一个简单选择器序列的唯一组件，或者紧跟着一个伪元素，那么可能被省略，通用选择器的存在暗示。
Examples:
*[hreflang|=en] and [hreflang|=en] are equivalent,
*.warning and .warning are equivalent,
*#myid and #myid are equivalent.
Note: it is recommended that the * not be omitted, because it decreases the potential confusion between, for example, div :first-child and div:first-child. Here, div *:first-child is more readable.
6.2.1 通配符选择器和命名空间
通用选择器允许一个可选的命名空间组件。它的用法如下:
ns|* 命名空间ns中的所有元素
| 所有元素
|* 没有命名空间的所有元素
* 如果没有指定默认命名空间，这相当于*|。否则它等价于ns|，其中nsns是默认命名空间。
包含先前未声明的命名空间前缀的通用选择器是无效选择器。
6.3 属性选择器 Attribute selectors (总结)
Selectors allow the representation of an element’s attributes. When a selector is used as an expression to match against an element, attribute selectors must be considered to match an element if that element has an attribute that matches the attribute represented by the attribute selector.
属性选择器用于匹配文档语言中带有属性的标签元素，换句话说如果标签有属性和属性值就可以考虑使用属性选择器。
6.3.1. 属性存在和值选择器 (总结)
CSS2 introduced four attribute selectors:
[att] Represents an element with the att attribute, whatever the value of the attribute.
[att=val] Represents an element with the att attribute whose value is exactly “val”.
[att~=val] Represents an element with the att attribute whose value is a whitespace-separated list of words, one of which is exactly “val”. If “val” contains whitespace, it will never represent anything (since the words are separated by spaces). Also if “val” is the empty string, it will never represent anything.
[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.
CSS2引入了四个属性选择器
[att] 表示具有att属性的元素，不管该属性的值是多少。
[att=val] 表示一个具有att属性的元素，该属性的值正好是“val”。
[att~=val] 表示att的属性值中只要包含val就能匹配到。
[att|=val] 匹配包含val,或val-(万国码U002D)*形式1到多次的att属性，目的是允许语言子代码匹配(例如，HTML中a元素的hreflang属性)，如BCP47 (BCP47)或其后续版本中所述。对于lang(或xml:lang)语言的子代码匹配，请参阅:lang伪类。
Attribute values must be CSS [identifiers] or [strings]. [CSS21] The case-sensitivity of attribute names and values in selectors depends on the document language.
属性值必须是CSS标识符或字符串。CSS21, 属性选择器中属性名和值的大小写敏感性取决于文档语言。
Examples:
h1[title] 匹配带有title属性的h1元素
span[class="example"] 匹配类名为example的span元素
span[hello="Cleveland"][goodbye="Columbus"] 同时匹配多个属性值
a[rel~="copyright"] 匹配包含copyright属性值的rel属性的a元素
a[href="http://www.w3.org/"] 精准匹配href为http://www.w3.org/ 的a元素
a[hreflang=fr] 匹配hreflang为fr的a元素
a[hreflang|="en"] 匹配以en-开头的hreflang属性的a元素
表示一个对话元素，只要它的属性字符有两个不同的值:
DIALOGUE[character=romeo]
DIALOGUE[character=juliet]
6.3.2. 匹配属性选择器的子字符串 (总结)
Three additional attribute selectors are provided for matching substrings in the value of an attribute:
[att^=val]
Represents an element with the att attribute whose value begins with the prefix “val”. If “val” is the empty string then the selector does not represent anything.
[att$=val]
Represents an element with the att attribute whose value ends with the suffix “val”. If “val” is the empty string then the selector does not represent anything.
[att*=val]
Represents an element with the att attribute whose value contains at least one instance of the substring “val”. If “val” is the empty string then the selector does not represent anything.
另外还提供了三个属性选择器来匹配属性值中的子字符串:
[att^=val] 与正则表达式很像，^表示开头，就是说以元素具有att属性，并且属性值以val开头
[att$=val] 同理，表示结尾
[att*=val] 同样的，这里表示val至少出现一次
Attribute values must be CSS identifiers or strings. [CSS21] The case-sensitivity of attribute names in selectors depends on the document language.
属性值必须是CSS标识符或字符串。选择器中属性名的大小写敏感性取决于文档语言。
Examples:
object[type^="image/"] 匹配type属性以image/开头的所有指定元素
a[href$=".html"] 匹配所有以html结尾的所有a元素，即内部引用
p[title*="hello"] 匹配title包含hello的p标签
6.3.3. 属性选择器和命名空间 (总结)
The attribute name in an attribute selector is given as a CSS qualified name: a namespace prefix that has been previously declared may be prepended to the attribute name separated by the namespace separator “vertical bar” (|).
In keeping with the Namespaces in the XML recommendation, default namespaces do not apply to attributes, therefore attribute selectors without a namespace component apply only to attributes that have no namespace (equivalent to “|attr”). An asterisk may be used for the namespace prefix indicating that the selector is to match all attribute names without regard to the attribute’s namespace.
属性选择器中的属性名是CSS限定名：就是说在[命名空间|数值值=属性名]语法之前，必须要有命名空间的声明，带有命名空间的属性选择器语法如前所示。而为了与XML建议中的命名空间保持一致，默认情况下命名空间不适用于属性，因此，没有命名空间组件的属性选择器只适用于没有命名空间的属性(相当于“|attr”)。命名空间前缀可以使用星号，表示选择器将匹配所有属性名，而不考虑属性的命名空间。
An attribute selector with an attribute name containing a namespace prefix that has not been previously declared is an invalid selector.
如果属性名称中包含以前没有声明过的命名空间前缀，则属性选择器是无效的选择器。
@namespace foo "http://www.example.com";
[foo|att=val] { color: blue }
[*|att] { color: yellow }
[|att] { color: green }
[att] { color: green }
第一个规则将只匹配"http://www.example.com"名称空间中属性为att且值为“val”的元素。
第二条规则只匹配属性为att的元素, 而不考虑该属性的命名空间(不包括命名空间)。
最后两条规则是等价的，只匹配属性为att且属性不在命名空间中的元素。
6.3.4. dtd中的默认属性值 (总结)
Attribute selectors represent attribute values in the document tree. How that document tree is constructed is outside the scope of Selectors. In some document formats default attribute values can be defined in a DTD or elsewhere, but these can only be selected by attribute selectors if they appear in the document tree. Selectors should be designed so that they work whether or not the default values are included in the document tree.
属性选择器表示文档树中的属性值。文档树的构造方式超出了选择器的范围。在某些文档格式中，默认属性值可以在DTD或其他地方定义，但只有当它们出现在文档树中时，属性选择器才能选择它们。选择器应该被设计成无论文档树中是否包含默认值，它们都能工作。
For example, a XML 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, e.g., [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.
例如，XML UA可能(但不是必需的)读取DTD的“外部子集”，而是必须在文档的“内部子集”中查找默认属性值。(参见[XML10]来了解这些子集的定义。)根据UA的不同，在DTD的外部子集中定义的默认属性值可能出现在文档树中，也可能不出现。
A UA that recognizes an XML namespace 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. (For example, an XHTML UA is not required to use its built-in knowledge of the XHTML DTD. See, e.g., [XML-NAMES] for details on namespaces in XML 1.0.)
识别XML命名空间的UA可以(但不是必须)使用它对该命名空间的了解来对待默认属性值，就像它们存在于文档中一样。(例如，XHTML UA不需要使用其内置的XHTML DTD知识。参见[XML- names]以了解XML 1.0中命名空间的详细信息。)
Note: Typically, implementations choose to ignore external subsets. This corresponds to the behaviour of non-validating processors as defined by the XML specification.
注意:通常，实现会选择忽略外部子集。这对应于XML规范定义的非验证处理器的行为。
Example:
考虑一个带有属性基数的元素示例，其默认值为“decimal”。DTD片段可能是
<!ATTLIST EXAMPLE radix (decimal,octal) "decimal">
如果样式表包含规则
EXAMPLE[radix=decimal] { /*... default property settings ...*/ }
EXAMPLE[radix=octal] { /*... other settings...*/ }
第一个规则可能不匹配默认设置了radix属性的元素，也就是说没有显式设置。要捕获所有情况，默认值的属性选择器必须删除:
EXAMPLE { /*... default property settings ...*/ }
EXAMPLE[radix=octal] { /*... other settings...*/ }
这里，因为选择器示例[radix=octal]比单独的类型选择器更具体，所以对于基数属性值为“octal”的元素，第二条规则中的样式声明将覆盖第一条规则中的样式声明。必须注意的是，所有只适用于默认情况的属性声明都会在非默认情况的样式规则中被覆盖。
6.4. 类选择器 （总结）
css在与HTML并肩合作时，开发者可能会运用英文的句号(也就是万国码中表示完全停止含义的符号)代替符号 =(在css中表示所有，这里就是说 ~= 等价于 .) 来表示类属性。因此，在HTML中 div.value 等价于 div[class=value]，并且属性必须紧跟.之后，之间不能有任何字符。
?这里UAs和MathML XML不了解，但大概意思如下
UAs允许在XML中使用.表示类，前提是UA具有特定于命名空间的知识，允许它确定哪个属性是对应命名空间的“class”属性(这半句不理解)，例如特定命名空间规范中的散文(例如SVG 1.1 SVG11描述了SVG类属性以及UA应该如何解释它，类似地，MathML MATHML3描述了MathML类属性)
这里的示例讲的是基础，但是很重要，这更接近一种思想：
示例：
我们可以按照以下实例为所有具有类名为pastoral的元素添加一些样式
*.pastoral { color: green }
然而通常情况下我们只需这样写
.pastoral { color: green }
还可以指定特定元素下具备指定类名的样式，如下
H1.pastoral { color: green }
根据这些规则，下面第一个H1实例将不会有绿色文本，而第二个实例将:
<H1>Not green</H1>
<H1 class="pastoral">Very green</H1>
下面的规则匹配任何P元素，它的class属性被分配了一组以空格分隔的值，这些值既包括pastoral也包括marine:
当class="pastoral blue aqua marine"时，此规则匹配，但class="pastoral blue"时不匹配。
p.pastoral.marine { color: green }
以上对于类属性的示例是很常规的用法，但是对于w3c关于类属性的描述却并未体现，所以要想深入，需要深度阅读理解w3c
由于CSS赋予类选择器相当大的权限，开发者能够尽其所能的通过类属性指定样式设计属于自己的“文档语言”，开发者应该比避免这种做法，因为文档语言的结构元素（也就是html标签）通常具有公认的可接受的含义，而开发者定义的样式可能不具备这种效果。
?为什么不规范，开发中这种方式很常见啊
注意:如果一个元素有多个类属性，它们的值在搜索类之前必须用空格连接起来。然而，到目前为止，工作组还不知道这种情况会以何种方式出现，因此在本规范中，这种行为显然是非规范的。
6.5. ID选择器 (总结)
文档语言可能包含声明为ID类型的属性。ID类型的属性之所以特殊，是因为在一个一致的文档中，没有两个这样的属性具有相同的值，而不管携带它们的元素类型是什么;无论使用哪种文档语言，都可以使用ID类型的属性来惟一地标识其元素。在HTML中，所有ID属性都命名为“ID”;XML应用程序可能会以不同的方式命名ID属性，但适用相同的限制。
文档语言的id类型属性允许作者将标识符分配给文档树中的一个元素实例。ID选择器包含一个“数字符号”(U+0023， #)，紧跟着ID值，它必须是一个CSS标识符。ID选择器表示一个元素实例，该元素实例的标识符与ID选择器中的标识符相匹配。
选择器不指定UA如何知道元素的id类型属性。UA可能，例如，读取文档的DTD，将信息硬编码或询问用户。
意犹未尽的感觉：
下面的ID选择器表示一个h1元素，它的ID类型属性值为"chapter1":
h1#chapter1
下面的ID选择器表示任何ID类型属性值为"chapter1"的元素:
#chapter1
下面的选择器表示其id类型属性值为“z98y”的任何元素。
*#z98y
? UAs与java的jdk功能很类似，就是说UAs像是css的引擎
注意:在XML 1.0 XML10中，关于哪个属性包含元素id的信息包含在DTD或模式中。在解析XML时，UAs并不总是读取DTD，因此可能不知道元素的ID是什么(尽管UA可能具有特定于命名空间的知识，允许它确定哪个属性是该命名空间的ID属性)。如果开发者知道或怀疑UA可能不知道元素的ID是什么，他应该使用普通的属性选择器:[name=p371]而不是#p371。
? 这里讲了一种情况，但是开发中貌似没人那么傻
如果一个元素有多个ID属性，为了使用ID选择器，必须将所有这些属性都作为该元素的ID处理。这种情况可以通过混合使用xml:id、DOM、xml dtd和特定于命名空间的知识来实现。
6.6. 伪类
引入伪类概念是为了允许基于文档树之外的信息或不能用其他简单选择器表示的信息进行选择。
伪类总是由一个“冒号”(:)和伪类的名称组成，括号中还可以有一个值。
在一个选择器中包含的所有简单选择器序列中都允许使用伪类。伪类可以出现在简单选择器序列的任何位置，在前导类型选择器或通用选择器之后(可能省略)。伪类名不区分大小写。一些伪类是互斥的，而另一些伪类可以同时应用于同一元素。伪类可以是动态的，在用户与文档交互时，元素可以获取或丢失伪类。
6.6.1. 动态伪类
动态伪类根据元素的名称、属性或内容以外的特征(原则上不能从文档树中推断出的特征)对元素进行分类。
动态伪类不会出现在文档源或文档树中。
6.6.1.1. 伪类::link和:visited
用户代理通常会以不同的方式显示未访问的链接。selector提供伪类:link和:visited来区分它们:
- :link应用于尚未访问的链接
- 一旦用户访问了链接，:visited就会应用
一段时间后，用户代理可以选择将已访问的链接返回到(未访问的)’:link '状态, 这两个状态互不相容。
Example:
The following selector represents links carrying class external and already visited:
a.external:visited
注意:样式表作者有可能滥用:link和:visited伪类来确定用户在未经用户同意的情况下访问了哪些网站。
因此，UAs可以将所有链接视为未访问的链接，或者在不同地呈现已访问和未访问的链接时，实施其他措施来保护用户的隐私。
6.6.1.2. 用户动作伪类
交互式用户代理有时会根据用户的操作改变呈现方式。Selectors提供了三个伪类来选择用户正在操作的元素。
-
当用户用一个指向设备指定一个元素时，会应用:hover伪类，但不一定要激活它。例如，当光标(鼠标指针)悬停在元素生成的框上时，可视用户代理可以应用这个伪类。不支持交互式媒体的用户代理不必支持这个伪类。一些支持交互式媒体的用户代理可能不支持这个伪类(例如，一个不能检测悬停的钢笔设备)。
-
当元素被用户激活时，会应用:active伪类。例如，在用户按下鼠标按钮并释放它之间。在具有多个鼠标按钮的系统上，:active仅应用于主要或主要激活按钮(通常是“左键”鼠标按钮)及其任何别名。
-
当元素有焦点时(接受键盘或鼠标事件，或其他形式的输入)，伪类就会应用。
可能存在文件语言或执行的特定限制，即元素可以变成:active的或获取的:focus
这些伪类并不互斥。一个元素可以同时匹配几个伪类。
选择器不定义元素’:active ‘或’:hover '的父元素是否也处于该状态。
注意:如果’:hover ‘状态应用于一个元素是因为它的子元素是由一个指向的设备指定的，那么’:hover '可能应用于一个不在指向的设备下面的元素。
Examples:
a:link /* unvisited links */
a:visited /* visited links */
a:hover /* user hovers */
a:active /* active links */
An example of combining dynamic pseudo-classes:
a:focus
a:focus:hover
The last selector matches a elements that are in the pseudo-class :focus and in the pseudo-class :hover.
注意:元素可以同时是’:visited ‘和’:active ‘(或者’:link ‘和’:active ')。
6.6.2. target伪类
有些uri引用资源中的位置。这种URI以“数字符号”(#)结束，后面跟着一个锚标识符(称为片段标识符)。
带有片段标识符的uri链接到文档中的某个元素，称为目标元素。例如，在HTML文档中有一个URI指向名为section_2的锚: http://example.com/html/top.html#section_2
target元素可以用:target伪类表示。如果文档的URI没有片段标识符，那么文档就没有目标元素。
Example:
p.note:target
This selector represents a p element of class note that is the target element of the referring URI.
CSS example:
Here, the :target pseudo-class is used to make the target element red and place an image before it, if there is one:
*:target { color : red }
*:target::before { content : url(target.png) }
6.6.3. 语言伪类
如果文档语言指定了如何确定元素的人类语言，那么就可以编写基于语言表示元素的选择器。例如，在HTML [HTML401]中，语言是由lang属性和可能来自元元素或协议(如HTTP头)的信息的组合决定的。XML使用一个名为XML:lang的属性，可能还有其他特定于文档语言的方法来确定语言。
伪类:lang©代表一个元素在语言C是否由一个元素:朗()选择器是完全基于元素的语言值(如果必要的规范化BCP 47语法)等于C的标识符,或标识符开始C立即紧随其后的是“-”(U + 002 d)。在ASCII范围内，对元素的语言值进行不区分大小写的C匹配。标识符C不一定是有效的语言名。
C必须是一个有效的CSS标识符[CSS21]，并且不能为空。(否则，选择器无效。)
注意:建议文档和协议使用来自BCP47 [BCP47]或其后续版本的代码来指示语言，对于基于xml的文档[XML10]，则使用“xml:lang”属性。参见“常见问题解答:两字母或三字母语言代码”。
Examples:
The two following selectors represent an HTML document that is in Belgian French or German. The two next selectors represent q quotations in an arbitrary element in Belgian French or German.
html:lang(fr-be)
html:lang(de)
:lang(fr-be) > q
:lang(de) > q
:lang©和’ |= ‘操作符的区别在于’ |= '操作符只对元素上的给定属性执行比较，而:lang©伪类使用文档语义的UAs知识来执行比较。
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). The P does not match the [lang|=fr] because it does not have a LANG attribute.
<body lang=fr>
<p>Je suis français.</p>
</body>
6.6.4. UI元素声明伪类
6.6.4.1. 伪类:enabled和:disabled
伪类:enabled表示处于enabled状态的用户界面元素;这些元素具有相应的禁用状态。
相反，:disabled伪类表示处于disabled状态的用户界面元素;这些元素具有相应的启用状态。
构成启用状态、禁用状态和用户界面元素的是与语言相关的。在一个典型的文档中，大多数元素既不是:enabled也不是:disabled。
注意:CSS属性可能会影响用户与给定用户界面元素交互的能力，但不会影响它是否匹配:enabled或:disabled;例如，显示和可见性属性对元素的启用/禁用状态没有影响。
6.6.4.2. 伪类:checked
单选和复选框元素可以由用户切换。当用户选择某些菜单项时，它们会被“选中”。当这样的元素被“on”切换时，会应用:checked伪类。虽然:选中的伪类本质上是动态的，并且可以根据用户的动作而改变，因为它也可以基于文档中语义属性的存在，但它适用于所有媒体。例如，:checked伪类最初应用于具有HTML4选中和选中属性的元素，如HTML4第17.2.1节所述，但是当然用户可以切换“off”这些元素，在这种情况下:checked伪类将不再应用。
6.6.4.3. 不确定的伪类
注意:单选和复选框元素可以由用户进行切换，但有时处于不确定的状态，既没有选中也没有选中。这可能是由于元素属性或DOM操作。
该规范的未来版本可能会引入一个:不定伪类，用于这些元素。
6.6.5. 结构伪类
选择器引入了结构化伪类的概念，允许基于文档树中的额外信息进行选择，这些信息不能用其他简单的选择器或组合符表示。
当计算一个元素在其兄弟元素列表中的位置时，不计算独立文本和其他非元素节点;索引编号从1开始。
6.6.5.1. :root伪类
root伪类表示文档的根元素。在HTML 4中，这总是HTML元素。
6.6.5.2. :nth-child()伪类
对于任何正整数或n的零值，第n个子(an+b)伪类表法表示在文档树中有一个+b-1兄弟元素的元素。它不需要有父元素。对于a和b大于0的值，这有效地将元素的子元素分成a个元素的组(最后一组取余数)，并选择每个组的第b个元素。例如，这允许选择器在一个表中每隔一行访问一次地址，并且可以用于在一个4行的循环中替换段落文本的颜色。a和b值必须是整数(正、负或零)。元素的第一个子元素的索引是1。
除此之外，:n -child()可以接受’奇数’和’偶数’作为参数。“奇”和2n+1的意义相同，“偶”和2n的意义相同。
:第n个子()的参数必须匹配下面的语法，其中INTEGER匹配标记[0-9]+，其余的标记化由10.2节中的词法扫描程序给出:
nth
: S* [ ['-'|'+']? INTEGER? {N} [ S* ['-'|'+'] S* INTEGER ]? |
['-'|'+']? INTEGER | {O}{D}{D} | {E}{V}{E}{N} ] S*
;
Examples:
tr:nth-child(2n+1) /* represents every odd row of an HTML table */
tr:nth-child(odd) /* same */
tr:nth-child(2n+0) /* represents every even row of an HTML table */
tr:nth-child(even) /* same */
/* Alternate paragraph colours in CSS */
p:nth-child(4n+1) { color: navy; }
p:nth-child(4n+2) { color: green; }
p:nth-child(4n+3) { color: maroon; }
p:nth-child(4n+4) { color: purple; }
当值b前面有一个负号时，表达式中的“+”字符必须被删除(它被表示b的负数的“-”字符替换)。
Examples:
:nth-child(10n-1) /* represents the 9th, 19th, 29th, etc, element */
:nth-child(10n+9) /* Same */
:nth-child(10n+-1) /* Syntactically invalid, and would be ignored */
当a=0时，不需要包含a部分(除非b部分已经被省略)。当不包含an且b是非负的，b前面的+号(如果允许的话)也可以省略。在这种情况下，语法简化为:第n个子(b)。
Examples:
foo:nth-child(0n+5) /* represents an element foo that is the 5th child
of its parent element */
foo:nth-child(5) /* same */
当a=1或a=-1时，1可以从规则中省略。
Examples:
The following selectors are therefore equivalent:
bar:nth-child(1n+0) /* represents all bar elements, specificity (0,1,1) */
bar:nth-child(n+0) /* same */
bar:nth-child(n) /* same */
bar /* same but lower specificity (0,0,1) */
如果b=0，那么所有ath元素都被选中。在这种情况下，+b(或-b)部分可以省略，除非a部分已经省略。
Examples:
tr:nth-child(2n+0) /* represents every even row of an HTML table */
tr:nth-child(2n) /* same */
在“("，before“)”之前，以及分隔an和b部分的“+”或“-”的两边都允许有空格。
Valid Examples with white space:
:nth-child( 3n + 1 )
:nth-child( +3n - 2 )
:nth-child( -n+ 6)
:nth-child( +6 )
Invalid Examples with white space:
:nth-child(3 n)
:nth-child(+ 2n)
:nth-child(+ 2)
如果a和b都等于0，伪类表示文档树中的任何元素。
值a可以是负数，但只有当n≥0时，an+b的正值才可以表示文档树中的一个元素。
Example:
html|tr:nth-child(-n+6) /* represents the 6 first rows of XHTML tables */
6.6.5.3. :nth-last-child()伪类
对于任何正整数或n的零值，:n -last-child(an+b)伪类表法表示在文档树中有一个+b-1兄弟元素的元素。它不需要有父元素。请参阅:n -child()伪类来了解其参数的语法。它还接受“偶数”和“奇数”值作为参数。
Examples:
tr:nth-last-child(-n+2) /* represents the two last rows of an HTML table */
foo:nth-last-child(odd) /* represents all odd foo elements in their parent element,
counting from the last one */
6.6.5.4. :nth-of-type()伪类
第n个类型(an+b)伪类表法表示一个元素在文档树中有一个+b-1兄弟元素，在它之前有相同的展开元素名，对于n的任何零或正整数值。它不需要有父元素。请参阅:n -child()伪类来了解其参数的语法。它也接受“偶数”和“奇数”值。
CSS example:
This allows an author to alternate the position of floated images:
img:nth-of-type(2n+1) { float: right; }
img:nth-of-type(2n) { float: left; }
6.6.5.5. :nth-last-of-type()伪类
:nth-last-of-type(an+b)伪类表法表示一个元素在文档树中有一个+b-1兄弟元素，在它后面有相同的展开元素名，对于n的任何零或正整数值。它不需要有父元素。请参阅:n -child()伪类来了解其参数的语法。它也接受“偶数”和“奇数”值。
Example:
To represent all h2 children of an XHTML body except the first and last, one could use the following selector:
body > h2:nth-of-type(n+2):nth-last-of-type(n+2)
In this case, one could also use :not(), although the selector ends up being just as long:
body > h2:not(:first-of-type):not(:last-of-type)
6.6.5.6. :first-child伪类
就像:nth-child(1)。first-child伪类表示兄弟元素列表中的第一个元素。
Examples:
The following selector represents a p element that is the first child of a div element:
div > p:first-child
This selector can represent the p inside the div of the following fragment:
<p> The last P before the note.</p>
<div class="note">
<p> The first P inside the note.</p>
</div>
but cannot represent the second p in the following fragment:
<p> The last P before the note.</p>
<div class="note">
<h2> Note </h2>
<p> The first P inside the note.</p>
</div>
The following two selectors are usually equivalent:
* > a:first-child /* a is first child of any element */
a:first-child /* Same (assuming a is not the root element) */
6.6.5.7. :last-child伪类
就像:nth-last-child(1)。last-child伪类表示一个同级元素列表中的最后一个元素。
Example:
The following selector represents a list item li that is the last child of an ordered list ol.
ol > li:last-child
6.6.5.8. :first-of-type伪类
就像:nth-of-type(1)。first-of-type伪类表示该类型的第一个兄弟元素。
Example:
The following selector represents a definition title dt inside a definition list dl, this dt being the first of its type in the list of children of its parent element.
dl dt:first-of-type
It is a valid description for the first two dt elements in the following example but not for the third one:
<dl>
<dt>gigogne</dt>
<dd>
<dl>
<dt>fusée</dt>
<dd>multistage rocket</dd>
<dt>table</dt>
<dd>nest of tables</dd>
</dl>
</dd>
</dl>
6.6.5.9. :last-of-type伪类
就像:nth-last-of-type(1)。last-of-type伪类表示该类型的最后一个同级元素。
Example:
The following selector represents the last data cell td of a table row tr.
tr > td:last-of-type
6.6.5.10. :only-child伪类
:only-child伪类表示一个没有兄弟元素的元素。与:first-child:last-child或:nth-child(1):nth-last-child(1)相同，但特异性较低。
6.6.5.11. :only-of-type伪类
type的:only-of-type伪类表示一个元素，该元素没有相同展开元素名的兄弟元素。与:first-of-type:last-of-type或:n -of-type(1):n -last-of-type(1)相同，但特异性较低。
6.6.5.12. :empty伪类
empty伪类表示一个根本没有子元素的元素。就文档树而言，只有元素节点和内容节点(例如DOM [DOM- level -3- core]文本节点、CDATA节点)，和实体引用)，其数据长度非零必须被认为影响空值;注释、处理指令和其他节点不能影响一个元素是否被认为是空的。
Examples:
p:empty is a valid representation of the following fragment:
<p></p>
foo:empty is not a valid representation for the following fragments:
<foo>bar</foo>
<foo><bar>bla</bar></foo>
<foo>this is not <bar>:empty</bar></foo>
6.6.6. Blank
这一节故意留空。(本节前面定义了a:contains()伪类。)
6.6.7. 否定的伪类
否定伪类:not(X)是一个函数表示法，它接受一个简单的选择器(不包括否定伪类本身)作为参数。它表示一个参数没有表示的元素。
否定可以不嵌套;:没有(不是(…))是无效的。还要注意，因为伪元素不是简单的选择器，所以它们不是:not()的有效参数。
Examples:
The following selector matches all button elements in an HTML document that are not disabled.
button:not([DISABLED])
The following selector represents all but FOO elements.
*:not(FOO)
The following group of selectors represents all HTML elements except links.
html|*:not(:link):not(:visited)
默认命名空间声明不影响否定伪类的参数，除非参数是通用选择器或类型选择器。
Examples:
Assuming that the default namespace is bound to "http://example.com/", the following selector represents all elements that are not in that namespace:
*|*:not(*)
The following selector matches any element that is not being hovered, regardless of its namespace. In particular, it is not limited to only matching elements in the default namespace that are not being hovered, and elements not in the default namespace don't match the rule when they are being hovered.
*|*:not(:hover)
注意::not()伪函数允许编写无用的选择器。例如:not(|)，它根本不表示任何元素，或者foo:not(bar)，它等同于foo，但具有更高的特异性。
7. 伪元素
伪元素创建了文档树的抽象，超出了文档语言所指定的抽象。例如，文档语言不提供访问元素内容的第一个字母或第一行的机制。伪元素允许作者引用这些无法访问的信息。伪元素还可以为作者提供一种引用源文档中不存在的内容的方法(例如::before和::after伪元素可以访问生成的内容)。
伪元素由两个冒号(::)和伪元素名组成。
这个::符号是由当前文档引入的，目的是区分伪类和伪元素。为了与现有样式表兼容，用户代理还必须接受CSS级别1和2中引入的伪元素的前面的一个冒号表示法(即:first-line、:first-letter、:before和:after)。这种兼容性不适用于本规范中引入的新伪元素。
每个选择器只能出现一个伪元素，如果存在，它必须出现在代表选择器主题的简单选择器序列之后。
注意:该规范的未来版本可能允许每个选择器使用多个伪元素。
7.1. ::first-line伪元素
first-line伪元素描述元素的第一个格式化行的内容。
CSS example:
p::first-line { text-transform: uppercase }
The above rule means "change the letters of the first line of every p element to uppercase".
The selector p::first-line does not match any real document element. It does match a pseudo-element that conforming user agents will insert at the beginning of every p element.
注意，第一行的长度取决于许多因素，包括页面的宽度、字体大小等。因此，一个普通的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 theparagraph.
</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>
7.1.1. 格式化第一行
在CSS中，::first-line伪元素只能在附加到类似块的容器(如块框、内联块、表格标题或表格单元格)时生效。在这种情况下，它引用该容器的第一个格式化行。
元素的第一个格式化行可能出现在同一流中的块级后代中(即，由于浮动或定位而不是流出的块级后代)。例如，DIV的第一行在’<div><p>This line…</p></div> '是p的第一行(假设p和div都是块级的)。
表格单元格或内联块的第一行不能是祖先元素的第一行格式化行。因此，在’<div><p>Hello<br>Goodbye</p>等等</div> '中，div的第一个格式化行不是"Hello"行。
注意:注意这个片段中的第一行p: <p><br> first…不包含任何字母(假设HTML 4中br的默认样式)。单词“First”不在第一行格式化。
一个UA应该像::第一行伪元素的虚构开始标记被嵌套在最内层的块级元素中一样。(由于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伪元素类似于内联级元素，但是有一定的限制。以下CSS属性适用于::first-line伪元素:字体属性，颜色属性，背景属性，’ word-spacing '， ’ letter-spacing '， ’ text-decoration '， ’ text-transform '， ’ line-height '。UAs也可以应用其他属性。
在CSS继承过程中，出现在第一行的子元素部分只继承::first-line伪元素中::first-line伪元素的属性。对于所有其他属性，继承来自第一行伪元素的非伪元素父元素。(没有出现在第一行的子元素部分总是继承自该子元素的父元素。)
7.2. 首字母伪元素
::first-letter伪元素表示元素的第一个字母，如果它的前面没有任何其他内容(如图像或内联表)。首字母伪元素可以用于“初始大写”和“drop caps”，这是常见的排版效果。
标点符号(即Unicode中定义的“开”(Ps)、“关”(Pe)、“首字母”(Pi)的字符。“final”(Pf)和“other”(Po)标点类)，必须包括在第一个字母之前或之后。[UNICODE]
第一个字母也适用于第一个字母是数字的情况，例如，“6700万美元是很多钱(a lot of money)”中的“6”。
注意:在某些情况下::首字母伪元素应该不仅仅包含一行中的第一个非标点字符。例如，组合字符必须与基本字符保持一致。此外，一些语言可能有特定的规则来处理某些字母组合。::第一个字母的UA定义应该至少包括UAX29定义的默认字母集群，并可能包括更多。例如，在荷兰语中，如果字母组合“ij”出现在一个元素的开头，那么两个字母都应该在::first-letter伪元素中考虑。[UAX29]
如果构成::第一个字母的两个字母不在同一个元素中，比如’T…， UA可以从其中一个元素、两个元素中创建一个::首字母的伪元素，或者干脆不创建一个伪元素。
类似地，如果块的第一个字母不在行首(例如由于双向重新排序)，那么UA不需要创建伪元素。
Example:
The following CSS and HTML 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 { 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:
<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.
The first letter must occur on the first formatted line. For example, in this HTML fragment:
First… the first line doesn’t contain any letters and ::first-letter doesn’t match anything (assuming the default style for br in HTML 4). In particular, it does not match the “F” of “First.”
7.2.1. 应用程序的CSS
在CSS中，::首字母的伪元素应用于类块容器，比如block、list-item、table-cell、table-caption和inline-block元素。
注意:该规范的未来版本可能允许这个伪元素应用于更多的显示类型。
首字母伪元素可以用于所有包含文本的元素，或者在同一流中有一个包含文本的后代的元素。一个UA应该像::首字母伪元素的虚构开始标记就在元素的第一个文本之前一样工作，即使第一个文本在后代中。
Example:
The fictional tag sequence for this HTML fragment:
<div>
<p>The first text.
is:
<div>
<p><div::first-letter><p::first-letter>T</...></...>he first text.
在CSS中，表格单元格或inline-block的第一个字母不能是祖先元素的第一个字母。因此，在’
Hello
Goodbye
如果一个元素是一个列表项(’ display: list-item ‘)，则::首字母应用于标记后的主框中的第一个字母。UAs可能会忽略带有’ list-style-position: inside '的列表项上的::第一个字母。如果一个元素在内容之前或之后有::，则::第一个字母应用于包含该内容的元素的第一个字母。
Example:
After the rule p::before {content: "Note: "}, the selector p::first-letter matches the "N" of "Note".
在CSS中，a::first-line pseudo-element类似于一个内联级元素，如果它的float属性为none;否则，它类似于浮动元素。以下属性适用于::首字母伪元素:字体属性，文本装饰，文本变换，字母间距，单词间距(当合适时)，行高，浮动，垂直对齐(仅当浮动为none时)，边距属性，填充属性，边框属性，颜色属性，背景属性。UAs也可以应用其他属性。为了允许UAs呈现一个排版上正确的降帽或初始帽，UA可以根据字母的形状选择行高、宽度和高度，这与普通元素不同。
Example:
This CSS and HTML 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 doesn't 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:
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.
Het hemekchegereoht heeft zich ten lange lesten Erbarremt over my en mijn benaeuwde vestenEn arme burgery, en op mijn volcx gebedEn dagelix geschrey de bange stad ontzet.
The following CSS 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 type="text/css">
P { font-size: 12pt; line-height: 1.2 }
P::first-letter { font-size: 200%; 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:
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.
为了实现传统的降帽格式，用户代理可以近似字体大小，例如对齐基线。此外，在格式化时可以考虑字形大纲。
7.3. Blank
这一节故意留空。(本节之前定义了a::selection伪元素。)
7.4. 伪元素的::before和::after
伪元素::before和::after可用于描述在元素内容之前或之后生成的内容。它们在CSS 2.1 [CSS21]中有解释。
当::first-letter和::first-line伪元素应用于使用::before或::after生成内容的元素时，它们应用于包含生成内容的元素的第一个字母或行。
8 关系选择器
8.1. 后代选择器
有时，作者可能希望选择器描述文档树中另一个元素的后代元素(例如，“包含在H1元素中的EM元素”)。后代组合子表示了这种关系。后代组合子是分隔两个简单选择器序列的空白。“A B”形式的选择器表示一个元素B，它是某个祖先元素A的任意后代。
Examples:
For example, consider the following selector:
h1 em
It represents an em element being the descendant of an h1 element. It is a correct and valid, but partial, description of the following fragment:
<h1>This <span class="myclass">headline
is <em>very</em> important</span></h1>
The following selector:
div * p
represents a p element that is a grandchild or later descendant of a div element. Note the whitespace on either side of the "*" is not part of the universal selector; the whitespace 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.
The following selector, which combines descendant combinators and attribute selectors, represents an element that (1) has the href attribute set and (2) is inside a p that is itself inside a div:
div p *[href]
8.2. 子选择器
子组合子描述了两个元素之间的童年关系。子组合符由“大于号”(U+003E， >)字符组成，它分隔两个简单选择符序列。
Examples:
The following selector represents a p element that is child of body:
body > p
The following example combines descendant combinators and child combinators.
div ol>li p
It represents a p element that is a descendant of an li element; 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.
关选择元素的第一个子元素的信息，请参阅上面关于:first-child伪类的部分。
8.3. 兄弟选择器
有两个不同的兄弟组合子:下一个兄弟组合子和子兄弟组合子。在这两种情况下，当考虑元素的邻接性时，非元素节点(例如元素之间的文本)都会被忽略。
8.3.1. Next-sibling combinator
下一个兄弟组合子由“加号”(U+002B， +)字符组成，该字符分隔两个简单选择器序列。两个序列表示的元素在文档树中共享相同的父元素，第一个序列表示的元素紧接第二个序列表示的元素之前。
Examples:
The following selector represents a p element immediately following a math element:
math + p
The following selector is conceptually similar to the one in the previous example, except that it adds an attribute selector — it adds a constraint to the h1 element, that it must have class="opener":
h1.opener + h2
8.3.2. Subsequent-sibling combinator
子序列兄弟组合子由“波浪号”(U+007E， ~)字符组成，该字符分隔两个简单选择器序列。两个序列所表示的元素在文档树中共享相同的父元素，第一个序列所表示的元素在第二个序列所表示的元素之前(不一定立即)。
Example:
h1 ~ pre
represents a pre element following an h1. It is a correct and valid, but partial, description of:
<h1>Definition of the function a</h1>
<p>Function a(x) has to be applied to all figures in the table.</p>
<pre>function a(x) = 12x/13.5</pre>
9 计算选择器的特异性
一个选择器的特异性计算如下:
- 计算选择器中ID选择器的数量(= a)
- 计算选择器中的类选择器、属性选择器和伪类的数量(= b)
- 计算选择器中类型选择器和伪元素的数量(= c)
- 忽略通用选择器
否定伪类中的选择器与其他类一样被计算，但是否定本身不被算作伪类。
连接三个数字a-b-c(在一个大基数的数字系统中)给出了特异性。
Examples:
* /* a=0 b=0 c=0 -> specificity = 0 */
LI /* a=0 b=0 c=1 -> specificity = 1 */
UL LI /* a=0 b=0 c=2 -> specificity = 2 */
UL OL+LI /* a=0 b=0 c=3 -> specificity = 3 */
H1 + *[REL=up] /* a=0 b=1 c=1 -> specificity = 11 */
UL OL LI.red /* a=0 b=1 c=3 -> specificity = 13 */
LI.red.level /* a=0 b=2 c=1 -> specificity = 21 */
#x34y /* a=1 b=0 c=0 -> specificity = 100 */
#s12:not(FOO) /* a=1 b=0 c=1 -> specificity = 101 */
注意:允许重复出现相同的简单选择器，这确实增加了特异性。
注意:在CSS 2.1中描述了HTML样式属性中指定的样式的特殊性。[CSS21]。
10 选择器的语法
10.1. 语法
下面的语法定义了选择器的语法。它是全局LL(1)，也可以是本地LL(2)(但是请注意，大多数UAs不应该直接使用它，因为它没有表达解析约定)。产品的格式是为人类使用而优化的，并且使用了Yacc之外的一些速记符号(参见[Yacc]):
- *: 0 or more
- +: 1 or more
- ?: 0 or 1
- |: separates alternatives
- [ ]: grouping
产品有:
selectors_group
: selector [ COMMA S* selector ]*
;
selector
: simple_selector_sequence [ combinator simple_selector_sequence ]*
;
combinator
/* combinators can be surrounded by whitespace */
: PLUS S* | GREATER S* | TILDE S* | S+
;
simple_selector_sequence
: [ type_selector | universal ]
[ HASH | class | attrib | pseudo | negation ]*
| [ HASH | class | attrib | pseudo | negation ]+
;
type_selector
: [ namespace_prefix ]? element_name
;
namespace_prefix
: [ IDENT | '*' ]? '|'
;
element_name
: IDENT
;
universal
: [ namespace_prefix ]? '*'
;
class
: '.' IDENT
;
attrib
: '[' S* [ namespace_prefix ]? IDENT S*
[ [ PREFIXMATCH |
SUFFIXMATCH |
SUBSTRINGMATCH |
'=' |
INCLUDES |
DASHMATCH ] S* [ IDENT | STRING ] S*
]? ']'
;
pseudo
/* '::' starts a pseudo-element, ':' a pseudo-class */
/* Exceptions: :first-line, :first-letter, :before and :after. */
/* Note that pseudo-elements are restricted to one per selector and */
/* occur only in the last simple_selector_sequence. */
: ':' ':'? [ IDENT | functional_pseudo ]
;
functional_pseudo
: FUNCTION S* expression ')'
;
expression
/* In CSS3, the expressions are identifiers, strings, */
/* or of the form "an+b" */
: [ [ PLUS | '-' | DIMENSION | NUMBER | STRING | IDENT ] S* ]+
;
negation
: NOT S* negation_arg S* ')'
;
negation_arg
: type_selector | universal | HASH | class | attrib | pseudo
;
10.2. 拼写检查
下面是用Flex(参见[Flex])表示法编写的标记器。标记器不区分大小写。
出现两次“\377”表示当前Flex版本可以处理的最高字符数(十进制255)。它们应该读作“\4177777”(十进制1114111)，这是Unicode/ISO-10646中可能的最高代码点。[UNICODE]
%option case-insensitive
ident [-]?{nmstart}{nmchar}*
name {nmchar}+
nmstart [_a-z]|{nonascii}|{escape}
nonascii [^\0-\177]
unicode \\[0-9a-f]{1,6}(\r\n|[ \n\r\t\f])?
escape {unicode}|\\[^\n\r\f0-9a-f]
nmchar [_a-z0-9-]|{nonascii}|{escape}
num [0-9]+|[0-9]*\.[0-9]+
string {string1}|{string2}
string1 \"([^\n\r\f\\"]|\\{nl}|{nonascii}|{escape})*\"
string2 \'([^\n\r\f\\']|\\{nl}|{nonascii}|{escape})*\'
invalid {invalid1}|{invalid2}
invalid1 \"([^\n\r\f\\"]|\\{nl}|{nonascii}|{escape})*
invalid2 \'([^\n\r\f\\']|\\{nl}|{nonascii}|{escape})*
nl \n|\r\n|\r|\f
w [ \t\r\n\f]*
D d|\\0{0,4}(44|64)(\r\n|[ \t\r\n\f])?
E e|\\0{0,4}(45|65)(\r\n|[ \t\r\n\f])?
N n|\\0{0,4}(4e|6e)(\r\n|[ \t\r\n\f])?|\\n
O o|\\0{0,4}(4f|6f)(\r\n|[ \t\r\n\f])?|\\o
T t|\\0{0,4}(54|74)(\r\n|[ \t\r\n\f])?|\\t
V v|\\0{0,4}(58|78)(\r\n|[ \t\r\n\f])?|\\v
%%
[ \t\r\n\f]+ return S;
"~=" return INCLUDES;
"|=" return DASHMATCH;
"^=" return PREFIXMATCH;
"$=" return SUFFIXMATCH;
"*=" return SUBSTRINGMATCH;
{ident} return IDENT;
{string} return STRING;
{ident}"(" return FUNCTION;
{num} return NUMBER;
"#"{name} return HASH;
{w}"+" return PLUS;
{w}">" return GREATER;
{w}"," return COMMA;
{w}"~" return TILDE;
":"{N}{O}{T}"(" return NOT;
@{ident} return ATKEYWORD;
{invalid} return INVALID;
{num}% return PERCENTAGE;
{num}{ident} return DIMENSION;
"<!--" return CDO;
"-->" return CDC;
\/\*[^*]*\*+([^/*][^*]*\*+)*\/ /* ignore comments */
. return *yytext;
11 配置文件
每个使用选择器的规范都必须定义它允许和排除的选择器子集，并描述该子集中所有组件的本地含义。
非规范的例子:
Selectors profile
Specification CSS level 1 、 type selectors 、 class selectors 、ID selectors
Accepts :link, :visited and :active pseudo-classes 、descendant combinator、::first-line and ::first-letter pseudo-elements
Excludes universal selector
attribute selectors
:hover and :focus pseudo-classes
:target pseudo-class
:lang() pseudo-class
all UI element states pseudo-classes
all structural pseudo-classes
negation pseudo-class
::before and ::after pseudo-elements
child combinators
sibling combinators
namespaces
额外的约束每个简单选择器序列只允许一个类选择器
Selectors profile
Specification CSS level 2
type selectors
universal selector
attribute presence and values selectors
class selectors
ID selectors
Accepts :link, :visited, :active, :hover, :focus, :lang() and :first-child pseudo-classes
descendant combinator
child combinator
next-sibling combinator
::first-line and ::first-letter pseudo-elements
::before and ::after pseudo-elements
Excludes substring matching attribute selectors
:target pseudo-classes
all UI element states pseudo-classes
all structural pseudo-classes other than :first-child
negation pseudo-class
subsequent-sibling combinators
namespaces
Extra constraints more than one class selector per sequence of simple selectors (CSS1 constraint)
constraints allowed
在CSS中，选择器表示模式匹配规则，这些规则决定哪些样式规则应用于文档树中的元素。
下面的选择器(CSS level 2)将匹配所有在section 1 header h1中设置了属性名的锚a:
h1 a[name]
所有附加到这种选择器的CSS声明都应用于匹配它的元素。
Selectors profile
Specification STTS 3
Accepts type selectors
universal selectors
attribute selectors
class selectors
ID selectors
all structural pseudo-classes
all combinators
namespaces
Excludes non-accepted pseudo-classes
pseudo-elements
Extra some selectors and combinators are not allowed in fragment descriptions on the right
constraints side of STTS declarations.
STTS 3中有两种不同的方式可以使用选择器:
- 一种与CSS选择机制等价的选择机制:附加在给定选择器上的声明被应用于匹配该选择器的元素，
- 出现在声明右侧的片段描述。
12 通用要求和一致性测试
本节仅定义与当前规范的一致性。
由于特定设备的限制(例如，非交互式用户代理可能不会实现动态伪类，因为它们在没有交互性的情况下没有意义)，用户代理无法实现部分规范并不意味着不符合。
所有重用选择器的规范都必须包含一个概要文件，列出它接受或排除的选择器子集，并描述它向当前规范添加的约束。
无效是由解析错误引起的，例如一个无法识别的令牌或当前解析点不允许的令牌。
用户代理必须遵守处理解析错误的规则:
- 包含未声明的命名空间前缀的简单选择器是无效的
- 包含无效简单选择器、无效组合符或无效令牌的选择器是无效的。
- 包含无效选择器的一组选择器无效。
重用选择器的规范必须定义如何处理解析错误。(在CSS中，使用选择器的整个规则都会被删除。)
13 测试
该规范有一个测试套件，允许用户代理验证它们与规范的基本一致性。这个测试套件并没有假装是详尽的，也没有涵盖选择器的所有可能的组合情况。
14 致谢
CSS工作组在此感谢多年来对该规范提出评论的每一个人。
工作组尤其要特别感谢Donna McManus、Justin Baker、Joel Sklar和Molly Ives Brower，他们对最后的电话草稿进行了最后的编辑审查。工作小组也要感谢Adam Kuehn, Boris Zbarsky, David Perrell, elliott Harold, Matthew Raymond, Ruud Steltenpool, Patrick Garies, Anton Prowse和W3C国际化工作小组最后的发言和友好的话语。
15 参考文献
15.1. 引用标准
[CSS21]
Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 7 June 2011. W3C Recommendation. URL: http://www.w3.org/TR/2011/REC-CSS2-20110607
[CSS3NAMESPACE]
Elika J. Etemad. CSS Namespaces Module Level 3. 29 September 2011. W3C Recommendation. URL: http://www.w3.org/TR/2014/REC-css-namespaces-3-20140320/
[FLEX]
Flex: The Lexical Scanner Generator. Version 2.3.7, ISBN 1882114213
[UNICODE]
The Unicode Consortium. The Unicode Standard. 2012. Defined by: The Unicode Standard, Version 6.2.0 (Mountain View, CA: The Unicode Consortium, 2012. ISBN 978-1-936213-07-8), as updated from time to time by the publication of new versions URL: http://www.unicode.org/standard/versions/enumeratedversions.html
[YACC]
S. C. Johnson. YACC - Yet another compiler compiler. Murray Hill. 1975. Technical Report.
15.2. 参考性文献
[BCP47]
A. Phillips; M. Davis. Tags for Identifying Languages. September 2009. 47. BCP. Currently represented by RFC 5646. URL: ftp://ftp.rfc-editor.org/in-notes/bcp/bcp47.txt
[CSS1]
Håkon Wium Lie; Bert Bos. Cascading Style Sheets (CSS1) Level 1 Specification. 11 April 2008. W3C Recommendation. URL: http://www.w3.org/TR/2008/REC-CSS1-20080411
[DOM-LEVEL-3-CORE]
Gavin Nicol; et al. Document Object Model (DOM) Level 3 Core Specification. 7 April 2004. W3C Recommendation. URL: http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407
[HTML401]
Dave Raggett; Arnaud Le Hors; Ian Jacobs. HTML 4.01 Specification. 24 December 1999. W3C Recommendation. URL: http://www.w3.org/TR/1999/REC-html401-19991224
[HTML5]
Ian Hickson; et al. HTML5. 28 October 2014. W3C Recommendation. URL: http://www.w3.org/TR/2014/REC-html5-20141028/
[MATHML3]
David Carlisle; Patrick Ion; Robert Miner. Mathematical Markup Language (MathML) Version 3.0 2nd Edition. 10 April 2014. W3C Recommendation. URL: http://www.w3.org/TR/2014/REC-MathML3-20140410/
[STTS3]
Daniel Glazman. Simple Tree Transformation Sheets 3. Electricité de France. 11 November 1998. Submission to the W3C. URL: http://www.w3.org/TR/NOTE-STTS3
[SVG11]
Erik Dahlström; et al. Scalable Vector Graphics (SVG) 1.1 (Second Edition). 16 August 2011. W3C Recommendation. URL: http://www.w3.org/TR/2011/REC-SVG11-20110816/
[UAX29]
Mark Davis. Unicode Text Segmentation. 12 September 2012. Unicode Standard Annex #29. URL: http://www.unicode.org/reports/tr29/
[XML-NAMES]
Tim Bray; et al. Namespaces in XML 1.0 (Third Edition). 8 December 2009. W3C Recommendation. URL: http://www.w3.org/TR/2009/REC-xml-names-20091208/
[XML10]
C. M. Sperberg-McQueen; et al. Extensible Markup Language (XML) 1.0 (Fifth Edition). 26 November 2008. W3C Recommendation. URL: http://www.w3.org/TR/2008/REC-xml-20081126/
15.3. 变更
实质性的，因为前一项建议是:
- 允许结构化伪类匹配根元素。请参阅测试例的分钟和结果。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
