深入理解CSS3結構偽類選擇器

摘 要：本文從結構偽類與類選擇器的比較、結構偽類與文檔樹的關系、結構偽類的功能與應用等三個層面，深入闡述了結構偽類的作用，結構偽類所表示的文檔樹結構，結構偽類通過位置索引定位子元素的機制。通過將定位子元素的結構偽類分為帶參數和不帶參數兩類，深入論述了帶參數結構偽類的參數模式、典型應用及與不帶參數結構偽類的對應關系。

關鍵詞：選擇器；結構偽類；文檔樹；位置索引

中圖分類號：TP391 文獻標識碼：A

Abstract：The article describes deeply the function of the structural pseudo-classes，the document tree structure represented by structural pseudo-classes and structural pseudo-classes mechanism of positioning sub-element by means of position index from the aspects of the comparison of the structural pseudo-classes and class selectors，the relationship of the structural pseudo-classes and the document tree as well as the functions and applications of the structural pseudo-classes.The article discusses in detail the parameter model and typical application with parameter structural pseudo-class，the corresponding relations between structural pseudo-class with and without parameters by dividing the structural pseudo-class of positioning sub-element into two classes with and without parameters.

Keywords：selectors；structural Pseudo-classes；document tree；position index

1 引言（Introduction）

CSS（Cascading Style Sheets）即層疊樣式表，是用于控制網頁顯示效果的技術。選擇器是匹配網頁元素的模式[1]，它作為樣式表的基本組成部分，用于匹配網頁中的元素。CSS3是CSS的第三個升級版本，它是一系列規范的集合。選擇器規范是CSS3系列規范中的一個，它的W3C（World Wide Web Consortium，萬維網聯盟）推薦標準是“Selectors Level 3（選擇器第三級）”。結構偽類（Structural Pseudo-classes）選擇器（規范中簡稱結構偽類）是CSS3選擇器規范新引入的一類選擇器，它基于文檔樹的結構信息匹配元素[1]，功能強大、最具特色，但也較難理解和使用。

2 結構偽類與類選擇器（Structural pseudo-classes and class selectors）

在CSS3之前，為給網頁元素設置樣式，Web開發人員一般是在HTML代碼中手動給元素添加類名，然后使用CSS的類選擇器匹配元素。這樣無節制使用類名的做法，總是導致網頁文檔中類名泛濫，不僅使編碼耗時費力，而且代碼不整潔、維護困難。為改變這種狀況，HTML5規范建議，要避免為了給元素定義樣式而使用類名?；谶@種理念，CSS3引入了結構偽類，有效的減少類名的使用。以一個無序列表為例，對類選擇器和結構偽類的應用做一個比較。

2.1 使用類選擇器匹配元素

為選擇第一個列表項和最后一個列表項，首先須在文檔源代碼中給它們添加類名，然后在CSS代碼中用類選擇器匹配元素。示例代碼如下：

HTML代碼：

• 1
• 2
• 3

CSS代碼：

/*通過類選擇器匹配第一個列表項*/

li.first {background-color：red；}

/*通過類選擇器匹配最后一個列表項*/

li.last {background-color：red；}

如果插入或追加列表項，則第一個或最后一個列表項會發生改變，所以，類名也要作相應變動，這給代碼維護帶來了極大的困難。

2.2 使用結構偽類匹配元素

結構偽類在插入或追加列表項時，文檔源代碼無須做任何改變，它也總是可以匹配到發生改變后的第一個和最后一個列表項。示例代碼如下：

HTML代碼：

• 1
• 2
• 3

CSS代碼：

/*通過結構偽類匹配第一個列表項*/

li：first -child{background-color：red；}

/*通過結構偽類匹配最后一個列表項*/

li：last-child {background-color：red；}

從以上比較可知，使用類名會改變文檔源代碼，而且，當項目變化時，還須手動維護類名，即元素的類名的獲得是靜態分配的；但使用結構偽類，不僅無須改變文檔源代碼，而且自動跟蹤項目系列的序號變化，使元素定位更為準確、高效[2]。也就是說元素的結構偽類可以動態的獲取和失去。

3 結構偽類與文檔樹（Structural pseudo-classes & document tree）

所有的結構偽類都基于HTML文檔樹（Document Tree）的結構信息，文檔樹也稱為文檔對象模型（Document Object Model，DOM）。當創建一個HTML文檔（圖1）并用Web瀏覽器查看時，瀏覽器把文檔中元素間的嵌套關系映射為一個樹形節點層次結構，即文檔樹。圖1所示文檔可以表示為如圖2所示的文檔樹。

3.1 文檔樹結構

文檔樹由節點構成，主要有元素節點、屬性節點和文本節點，樹中的每個節點都處于文檔整體結構的某個層級（本文所說元素均指元素節點）。文檔樹中位于同一個分支的元素間的關系，有祖先后代關系、父子關系和兄弟關系。在不同的上下文中，對同一個元素的稱謂可能是父元素、子元素、祖先元素、后代元素和兄弟元素。

3.1.1 父子關系、父元素和子元素

在文檔樹的層級結構中，如果從一個元素到另一個元素的路徑，處于兩個相鄰層級，那么，這兩個元素是父子關系。位于上面層級的是父元素，位于下面層級是子元素。例如：在圖2中，元素是

例如：選擇器span：nth-child（3n-5）中，表達式3n-5的取值為{-5，-2，1，4，7，10，…}，位置索引不能為零和負值，所以-5、-2無效，這個選擇器匹配的子元素的位置索引為1、4、7、10…，而且必須是元素。在圖2中，位置索引為1的是

元素，位置索引為7的是元素，位置索引10超出了子元素的數量范圍，所以，這個選擇器只匹配到位置索引為4的元素。

表達式an+b匹配元素的模式靈活多變，當a、b取特殊值時，出現了一些有趣的應用?？梢苑謅=0和a≠0兩種情況。

①a=0

當a=0，b>1時，an+b的值是一個常數，表示匹配位置索引的值為b的子元素。例如：p：nth-child（3），表達式中，a=0，b=3，表示匹配位置索引為3而且是

元素的子元素。

②a≠0

a.當a>0且b>0時

表達式表示將兄弟元素分組，每組a個元素（最后一組為剩余元素），每組中的第b個元素被選中[1]，或者說表達式表示在兄弟元素列表中，從第b個元素開始，每隔a個元素選中一個[2]。

例如，假定圖2中

元素擴展到10個列表項，則選擇器li：nth-child（3n+2），匹配的列表項的位置索引為{2，5，8，11，…}，可以理解為將兄弟元素分成每3個一組，10個元素可分成4組，最后一組，只有一個元素，然后選中每組中的第2個元素；也可以表述為，從第2個元素開始，每隔3個元素選中一個；所以，選擇器匹配位置索引為2、5、8的列表項。

如果要循環選中每組中的所有列表項，則選擇器可寫為：

li：nth-child（3n+1），匹配每組中的第一個子元素；

li：nth-child（3n+2），匹配每組中的第二個子元素；

li：nth-child（3n+3），匹配每組中的第三個子元素。

b.當a=1，b>0

假設b=6，則表達式為n+6，取值集合為{6，7，8，9，…}，所以，選擇器li：nth-child（n+6）將匹配位置索引大于等于6的所有元素。

c.當a=-1，b>0

假設b=6，則表達式為-n+6，取值集合為{6，5，4，3，…}，所以，選擇器li：nth-child（-n+6）將匹配位置索引小于等于6的所有元素。

（2）關鍵字

關鍵字有“odd”和“even”，“odd”表示匹配位置索引為奇數的子元素，“even”表示匹配位置索引為偶數的子元素。例如，在圖2中，li：nth-child（even）將匹配到所有偶數列表項，相當于li：nth-child（2n）；li：nth-child（odd）將匹配到所有奇數列表項，相當于li：nth-child（2n+1）；所以，“關鍵詞”是表達式為“2n”和“2n+1”的語義化表示。

4.3.2 其他帶參數結構偽類

帶參數的結構偽類除：nth-child（）外，還有：nth-last-child（）、：nth-of-type（）、：nth-last-of-type（），它們除位置索引的編排規則與：nth-child（）不同之外，用法和：nth-child（）相同。

（1）：nth-last-child（）偽類

：nth-last-child（）偽類的位置索引的編排規則是，從倒數第一個元素開始，對所有兄弟元素建立索引。例如，在圖2中，選擇器p：nth-last-child（5），表示在所有兄弟元素中，選

中位置索引為倒數第5個，而且是

元素的子元素。

（2）：nth-of-type（）偽類

：nth-of-type（）偽類的位置索引的編排規則是，從同類型兄弟元素中的第一個開始建立索引，元素類型由偽類前的元素選擇器決定。例如，在圖2中，選擇器p：nth-of-type（3），表示選擇第3個

類型的兄弟元素。

（3）：nth-last-of-type（）偽類

：nth-last-of-type（）偽類的位置索引的編排規則是，從倒數第一個同類型兄弟元素開始建立索引，元素類型由偽類前的元素選擇器決定。例如，在圖2中，選擇器p：nth-last-of-type（3），表示選擇倒數第3個

類型的兄弟元素。

4.3.3 不帶參數結構偽類

在匹配子元素的結構偽類中，有六個不帶參數的結構偽類。本質上，它們是帶參數結構偽類取特殊數值時的快捷寫法[3]，只用來匹配一個子元素。這種寫法更具語義，便于記憶。不帶參數結構偽類的功能及與不帶參數結構偽類的對應關系見表1。

5 結論（Conclusion）

CSS3結構偽類的引入，有效減少了HTML源代碼中類名的使用，使源代碼更加簡潔，便于維護。CSS3設計結構偽類是基于文檔樹的根節點、空節點、子節點等結構信息。CSS3結構偽類可用來匹配根元素、空元素和子元素，其中匹配子元素的結構偽類采用位置索引來定位元素，可分為帶參數和不帶參數兩類，不帶參數結構偽類本質上是帶參數結構偽類取特殊值時的語義寫法。帶參數結構偽類的參數可以是表達式an+b和關鍵字odd、even，它們都表示位置索引值的集合，通過位置索引值可定位到一個或多個子元素。

參考文獻（References）

[1] W3C.Selectors Level 3 W3C Candidate Recommendation 30 January 2018[EB/OL].https：//www.w3.org/TR/css3-selectors.

[2] Eric A.Meyer.CSS： The Definitive Guide[M].Published by O' Reilly Media， Inc.，June 2017：1127-11143.

[3] CSS魔法.CSS揭秘[M].北京：人民郵電出版社，2016：178-182.

[4] （英）弗雷恩（Frain，B.）.田永強，譯.響應式Web設計：HTML5和CSS3實戰[M].北京：人民郵電出版社，2013：113-121.

[5] 大漠.圖解CSS3核心技術與案例實戰[M].北京：機械工業出版社，2014：312-357.

作者簡介：

黃志剛（1965-），男，本科，高級工程師.研究領域：Web技術，大數據技術.