Selectors4

From HTML5 Chinese Interest Group Wiki
Jump to: navigation, search

介紹

選擇器概述

選擇器的語法與結構

結構與術語

決定選擇器的對象

偽類

偽元素

字符與大小寫

名稱空間

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

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

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

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

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

議題一:有人要求放棄最後一個規則,以媒體查詢的錯誤處理規則進行Note.png

邏輯組合

選擇器列表

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

範例三

CSS 範例:

在這個例子中,我們把三個有相同宣告列表的規則濃縮成一個。也就是說:

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

與下面等價:

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

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

範例四

不合法的 CSS 例子:

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

與下面不等價:

h1, h2..foo, h3 { font-family: sans-serif }
因為上面的選擇器(h1, h2..foo, h3)整個不合法 而使用者代理會將整個丟棄。(當選擇器沒集結成群組的時候,使用者代理只會丟棄 h2..foo 的規則。)

批配偽類 ― ‘:matches()’

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

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

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

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

範例五

舉例來說,以下選擇器批配任何名稱空間的任何有焦距或是被盤旋的元素。特別是,此選擇器不只是選取在預設名稱空間裡有焦距或是被盤旋的元素。

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

另一方面,因為以下選擇器用了直接的通配選擇器,它只代表在預設名稱空間裡有焦距或是被盤旋的元素。

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

逆偽類 ― ‘:not()’

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

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

注:選擇器等級三只允許 :not() 的參數裡有簡單選擇器Note.png

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

範例六

舉例來說,以下選擇器批配 HTML 文件裡所有不被停用的 button 元素。

button:not([DISABLED])

下面選擇器表示所有不是 FOO 的元素。

*:not(FOO)

下面選擇表示所有不是連結的 HTML 元素。

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

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

注::not() 偽類可以用來寫出沒有用的選擇器。舉例來說,:not(*|*) 不代表任何元素,foo:not(bar)foo 等價但是有較高的特異性。

元素選擇器

屬性選擇器

位置偽類

使用者操作偽類

時間軸偽類

語言相關偽類

UI 狀態偽類

樹結構偽類

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

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

‘:root’ 偽類

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

‘:nth-child()’ 偽類

:nth-child(an+b) 偽類代表,對於任一個正整數或零 n,有 an+b-1 的兄弟元素在其之前,且它有一個父元素的元素。當 ab 均大於零,:nth-child(an+b) 等同於將元素的子元素分成一組 a 個元素的各小組(最後一組為餘數部份),並選擇各組的第 b 個元素。舉例來說,這可以用來選取一個表格的偶數或奇數行,也可以在不同段落裡交替使用四個文字顏色。ab 值必須是整數(正、負、零)。一個元素的第一個子元素的索引為 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 部份)。沒有寫 anb 不為負數的時候,網頁作者可以忽略 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) /* 同樣 */

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

範例三十四

有空白的合法範例:

  :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)

ab 皆等於零,則偽類不代表文件樹裡的任何元素。

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)
  • 忽略通配選擇器

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

議題七:根據批配結果決定特異性比較好。參見 dbaron 的郵件

串連 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 */
注:重複使用相同的簡單選擇器可以增加特異性。
注:HTML style 屬性指定的樣式的特異性在 CSS 2.1 有描述。[CSS21]

正規語法

議題八:本章節需要更新。

文法

詞法掃描

本章节已移至 Tokenization