Selectors4

介紹

選擇器概述

選擇器的語法與結構

結構與術語

決定選擇器的對象

偽類

偽元素

字符與大小寫

名稱空間

不合法的選擇器與錯誤處理

選擇器合法與否是解析決定的，例如：不認識的 token 或是在當前解析位置不允許的 token 會造成選擇器不合法。

使用者代理必須遵守下面的解析錯誤處理規則：

• 含有未宣告名稱空間前輟的簡單選擇器不合法
• 含有不合法簡單選擇器、結合子、token 的選擇器不合法
• 含有不合法選擇器的選擇器列表不合法

不合法的選擇器不代表任何東西。

邏輯組合

選擇器列表

一個逗號區隔的選擇器列表代表選擇器列表裡所有選擇器選取的元素的聯集。（逗號是 U+002C）舉例來說，在 CSS 裡當數個選擇器有相同的宣告列表時，這些選擇器可以組合成一個逗號區隔的列。空白可出現在逗號的前面或後面。

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

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

緊告：在這個例子中等價性成立是因為所有選擇器皆合法。要是其中有一個選擇器不合法，整個選擇器群組即為不合法。這會讓針對這三個標題元素的規則（後者）不合法，但是在前面的展開裡三個分開的標題規則裡的只有其中一個會是不合法的。

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

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

批配偽類 ― ‘:matches()’

批配偽類 ― :matches() ― 是一個接受選擇器列表作為其參數的函數偽類。批配偽類代表其參數代表的元素。

選擇器等級四只允許在 :matches() 裡有複合選擇器 ― 不允許裡面有結合子。另外，:matches() 不可在另一個 :matches() 或是 :not() 裡面 ― :matches(:matches(...)) 和 :not(:matches(...)) 皆不合法。

批配偽類無法表示偽元素 ― 偽元素在 :matches() 裡不合法。

除非參數是一個直接的通配選擇器或是一個標籤選擇器，不然預設名稱空間宣告不影響批配偽類裡任何選擇器的對象。

*|*:matches(:hover, :focus)

*|*:matches(*:hover, *:focus)

逆偽類 ― ‘:not()’

逆偽類 ― :not() ― 是一個接受選擇器列表作為其參數的函數偽類。逆偽類代表其參數不代表的元素。

逆偽類無法表示偽元素 ― 偽元素在 :not() 裡不合法。

button:not([DISABLED])

*:not(FOO)

html|*:not(:link):not(:visited)

除非參數是一個直接的通配選擇器或是一個標籤選擇器，預設名稱空間宣告不影響任何逆偽類裡任何選擇器的對象。（參見 :matches() 的例子。）

元素選擇器

屬性選擇器

位置偽類

使用者操作偽類

時間軸偽類

語言相關偽類

UI 狀態偽類

樹結構偽類

本規範引入了樹結構偽類的概念以利用文件樹的額外資訊，做到不能用其他簡單選擇器或結合子表示的選取。

當使用者代理計算元素在其父元素的子節點列表中位置時，不計算單獨的文字節點與其它非元素節點。當使用者代理計算元素在其父元素的子節點列表中位置時，從 1 開始計數。

‘:root’ 偽類

:root 偽類代表一個文件根元素。在 HTML 4 裡，這是 HTML 元素。

‘:nth-child()’ 偽類

:nth-child(an+b) 偽類代表，對於任一個正整數或零 n，有 an+b-1 的兄弟元素在其之前，且它有一個父元素的元素。當 a 和 b 均大於零，:nth-child(an+b) 等同於將元素的子元素分成一組 a 個元素的各小組（最後一組為餘數部份），並選擇各組的第 b 個元素。舉例來說，這可以用來選取一個表格的偶數或奇數行，也可以在不同段落裡交替使用四個文字顏色。a、b 值必須是整數（正、負、零）。一個元素的第一個子元素的索引為 1。

除此之外，:nth-child() 還接受 ‘odd’ 與 ‘even’ 作為參數。‘odd’ 的意義與 2n+1 相同，‘even’ 的意義與 2n 相同。

:nth-child() 的參數必須批配下述文法，其中，INTEGER 批配 token [0-9]+，其餘的 tokenization 由 10.2 小節的詞法掃描給出。

nth
    : S* [ ['-'|'+']? INTEGER? {N} [ S* ['-'|'+'] S* INTEGER ]? |
           ['-'|'+']? INTEGER | {O}{D}{D} | {E}{V}{E}{N} ] S*
    ;

tr:nth-child(2n+1) /* 代表 HTML 表格的奇數行 */
  tr:nth-child(odd)  /* 同樣 */
  tr:nth-child(2n+0) /* 代表 HTML 表格的偶數行 */
  tr:nth-child(even) /* 同樣 */

  /* 以 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 的 "-" 號取代）。

:nth-child(10n-1)  /* 代表第 9, 19, 29... 個元素 */
  :nth-child(10n+9)  /* 同樣 */
  :nth-child(10n+-1) /* 不合語法，會被丟掉 */

當 a=0，網頁作者不須要寫 an 的部份（除非已省略了 b 部份）。沒有寫 an 且 b 不為負數的時候，網頁作者可以忽略 b 前的 "+" 號。在這種情況下語法簡化成 :nth-child(b)。

foo:nth-child(0n+5)   /* 代表一個 foo 元素其父元素的第五個子元素就是自己 */
  foo:nth-child(5)      /* 同樣 */

當 a=1 或 a=-1，網頁作者可以忽略 1。

bar:nth-child(1n+0)   /* 代表所有 bar 元素，特異性 (0,1,1) */
  bar:nth-child(n+0)    /* 同樣 */
  bar:nth-child(n)      /* 同樣 */
  bar                   /* 同樣，但是特異性是較小的 (0,0,1) */

若 b=0，則選擇每 a 個元素的最後一個。在這種情況下，除非已經忽略了 a 部份，網頁作者可以忽略 +b（或 -b）的部份。

tr:nth-child(2n+0) /* 代表 HTML 表格的偶數行 */
  tr:nth-child(2n) /* 同樣 */

在 "(" 的後面、")" 的前面可以有空白，當 an 與 b 都在的時候，分隔兩部份的 "+" 或 "-" 的兩邊可以有空白。

  :nth-child( 3n + 1 )
  :nth-child( +3n - 2 )
  :nth-child( -n+ 6)
  :nth-child( +6 )

  :nth-child(3 n)
  :nth-child(+ 2n)
  :nth-child(+ 2)

若 a 與 b 皆等於零，則偽類不代表文件樹裡的任何元素。

a 可以是負的，但是只有在 an+b n≧0 的時候代表文件樹裡面的元素。

html|tr:nth-child(-n+6)  /* 代表 XHTML 表格的前六行 */

‘:nth-last-child()’ 偽類

‘:nth-of-type()’ 偽類

‘:nth-last-of-type()’ 偽類

‘:nth-match()’ 偽類

‘:nth-last-match()’ 偽類

‘:first-child’ 偽類

‘:last-child’ 偽類

‘:first-of-type’ 偽類

‘:last-of-type’ 偽類

‘:only-child’ 偽類

‘:only-of-type’ 偽類

‘:empty’ 偽類

格結構偽類

結合子

計算選擇器的特異性

一個選擇器的特異性由以下方式計算：

• 計算選擇器裡 ID 選擇器的個數（=a）
• 計算選擇器裡類選擇器、屬性選擇器與偽類的個數（=b）
• 計算選擇器裡標籤選擇器與偽元素的個數（=c）
• 忽略通配選擇器

逆偽類與批配偽類的特異性是最特異的那個參數的特異性，偽類本身不算做偽類。

串連 a-b-c 三個數字（用一個基數很大的數字系統）即得到特異性。

*               /* a=0 b=0 c=0 -> 特異性 =   0 */
LI              /* a=0 b=0 c=1 -> 特異性 =   1 */
UL LI           /* a=0 b=0 c=2 -> 特異性 =   2 */
UL OL+LI        /* a=0 b=0 c=3 -> 特異性 =   3 */
H1 + *[REL=up]  /* a=0 b=1 c=1 -> 特異性 =  11 */
UL OL LI.red    /* a=0 b=1 c=3 -> 特異性 =  13 */
LI.red.level    /* a=0 b=2 c=1 -> 特異性 =  21 */
#x34y           /* a=1 b=0 c=0 -> 特異性 = 100 */
#s12:not(FOO)   /* a=1 b=0 c=1 -> 特異性 = 101 */

正規語法

文法

詞法掃描

本章节已移至 Tokenization