目錄：
-
簡介
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
等等 '中，div的第一個字母不是字母"H"。事實上，DIV沒有第一個字母。
如果一個元素是一個清單項(’ 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. 變更
實質性的，因為前一項建議是:
- 允許結構化僞類比對根元素。請參閱測試例的分鐘和結果。