深入理解CSS3結(jié)構(gòu)偽類選擇器

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

關(guān)鍵詞：選擇器；結(jié)構(gòu)偽類；文檔樹；位置索引

中圖分類號：TP391 文獻(xiàn)標(biāo)識碼：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）即層疊樣式表，是用于控制網(wǎng)頁顯示效果的技術(shù)。選擇器是匹配網(wǎng)頁元素的模式[1]，它作為樣式表的基本組成部分，用于匹配網(wǎng)頁中的元素。CSS3是CSS的第三個升級版本，它是一系列規(guī)范的集合。選擇器規(guī)范是CSS3系列規(guī)范中的一個，它的W3C（World Wide Web Consortium，萬維網(wǎng)聯(lián)盟）推薦標(biāo)準(zhǔn)是“Selectors Level 3（選擇器第三級）”。結(jié)構(gòu)偽類（Structural Pseudo-classes）選擇器（規(guī)范中簡稱結(jié)構(gòu)偽類）是CSS3選擇器規(guī)范新引入的一類選擇器，它基于文檔樹的結(jié)構(gòu)信息匹配元素[1]，功能強(qiáng)大、最具特色，但也較難理解和使用。

2 結(jié)構(gòu)偽類與類選擇器（Structural pseudo-classes and class selectors）

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

2.1 使用類選擇器匹配元素

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

HTML代碼：123

CSS代碼：

/*通過類選擇器匹配第一個列表項(xiàng)*/

li.first {background-color：red；}

/*通過類選擇器匹配最后一個列表項(xiàng)*/

li.last {background-color：red；}

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

2.2 使用結(jié)構(gòu)偽類匹配元素

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

HTML代碼：123

CSS代碼：

/*通過結(jié)構(gòu)偽類匹配第一個列表項(xiàng)*/

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

/*通過結(jié)構(gòu)偽類匹配最后一個列表項(xiàng)*/

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

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

3 結(jié)構(gòu)偽類與文檔樹（Structural pseudo-classes & document tree）

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

3.1 文檔樹結(jié)構(gòu)

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

3.1.1 父子關(guān)系、父元素和子元素

在文檔樹的層級結(jié)構(gòu)中，如果從一個元素到另一個元素的路徑，處于兩個相鄰層級，那么，這兩個元素是父子關(guān)系。位于上面層級的是父元素，位于下面層級是子元素。例如：在圖2中，元素是元素的父元素，反之，元素是元素的子元素。

3.1.2 祖先后代關(guān)系、祖先元素和后代元素

在文檔樹的層級結(jié)構(gòu)中，如果從一個元素到另一個元素的路徑，跨越兩個或兩個以上的層級，那么，這兩個元素是祖先后代關(guān)系，在一個元素之下的所有層級的一組元素是其后代元素。一個元素的任何父元素、祖父元素、及其上層的所有元素是其祖先元素。例如：在圖2中，元素是元素的祖先元素，反之，元素是元素的后代元素。元素是所有元素的祖先元素，是HTML文檔的根元素。

3.1.3 兄弟關(guān)系和兄弟元素

存在于同一個層級中，具有相同父元素的元素是兄弟關(guān)系，彼此互為兄弟元素。例如：圖1中，元素、元素、

元素、元素都是元素的子元素，是兄弟關(guān)系，互為兄弟元素。

3.2 結(jié)構(gòu)偽類中的結(jié)構(gòu)信息

CSS3定義了12個結(jié)構(gòu)偽類，它們分別表示文檔樹的三種結(jié)構(gòu)，定位三種元素。

（1）：root pseudo-class（根偽類），表示文檔樹的根節(jié)點(diǎn)，用來定位根元素。在HTML文檔中，html元素就是根元素，用來表示整個網(wǎng)頁。

（2）：empty pseudo-class（空偽類），表示文檔樹的空節(jié)點(diǎn)，用來定位空元素�？展�(jié)點(diǎn)是指既沒有文本子節(jié)點(diǎn)，也沒有元素子節(jié)點(diǎn)的節(jié)點(diǎn)，例如，在圖2中，第三個

元素和元素就是空元素

（3）：nth-child（）等其余10個結(jié)構(gòu)偽類，表示文檔樹父子關(guān)系中的子元素節(jié)點(diǎn)，通過子元素的位置信息定位子元素。例如：在圖2中，元素

有7個子元素，p：nth-child（3）表示匹配第3個子元素，而且，這個元素必須是

元素。

4 結(jié)構(gòu)偽類功能及應(yīng)用（Functions and applications

of the structural pseudo-classes）

CSS3中的12個結(jié)構(gòu)偽類，分別定位文檔的根元素、空元素和子元素。根偽類和空偽類的應(yīng)用較為簡單，其余定位子元素的結(jié)構(gòu)偽類的應(yīng)用較為復(fù)雜，尤其是帶參數(shù)結(jié)構(gòu)偽類的應(yīng)用靈活多變、較難理解。

4.1 定位根元素

根偽類（：root pseudo-class）用來定位文檔樹的根元素。例如，要設(shè)置整個頁面的背景顏色為藍(lán)色，則CSS代碼可寫成：

：root {background-color： blue；} 或?qū)懗?/p>

html：root {background-color： blue；}

4.2 定位空元素

空偽類（：empty pseudo-class）用來定位文檔樹中的空元素。如果要匹配圖2中的空段落，為其設(shè)置背景顏色，則CSS代碼可寫成：

p：empty{background-color： blue；}

如果要匹配圖2中的所有空元素（一個

元素和一個元素），為它們設(shè)置背景顏色，則CSS代碼可寫成：

：empty{background-color： blue；}

4.3 定位子元素

匹配子元素的結(jié)構(gòu)偽類共10個，可分為帶參數(shù)和不帶參數(shù)兩類。

4.3.1 帶參數(shù)結(jié)構(gòu)偽類

帶參數(shù)結(jié)構(gòu)偽類有四個，名稱均以“：nth-”為前綴，最后跟一對圓括號，可匹配一個或多個子元素。帶參數(shù)結(jié)構(gòu)偽類通過建立子元素的位置索引來定位元素。下面主要以：nth-child（）的應(yīng)用為例，闡述帶參數(shù)結(jié)構(gòu)偽類的工作機(jī)制。

4.3.1.1 位置索引

系統(tǒng)在匹配子元素時，按照子元素在兄弟元素中的相對位置，給每個子元素都設(shè)置了一個位置索引，起始值為1，需注意的是，獨(dú)立文本和非元素節(jié)點(diǎn)不參與位置索引的計(jì)數(shù)。不同的結(jié)構(gòu)偽類，位置索引的編排規(guī)則不同。

用：nth-child（）偽類匹配子元素時，子元素位置索引的編排規(guī)則是，對所有兄弟元素從上到下順序索引，第1個子元素的位置索引為1。例如在圖2中，元素有7個子元素，元素的位置索引為1，元素的位置索引為7。

4.3.1.2 偽類參數(shù)

參數(shù)可以是表達(dá)式，也可以關(guān)鍵字。

（1）表達(dá)式

表達(dá)式的一般形式為an+b，其中，a和b是任意整型常量，n是大于等于零的整型變量，要特別注意的是，在CSS代碼中表達(dá)式中的變量一定要用字母n表示，否則無效。當(dāng)n=0，1，2，...時，an+b的值構(gòu)成了一個集合，其中正整數(shù)才表示一個子元素的位置索引，負(fù)整數(shù)和0是無效值，可直接忽略。當(dāng)位置索引的值大于頁面中子元素的數(shù)量時，就沒有元素可選，其值也可忽略。

[1]2[3]存入我的閱覽室

《軟件工程》

2018年03期

方法與技術(shù)基于改進(jìn)型遺傳算法求解高校排課問題UML活動圖的正確性檢測剖面數(shù)據(jù)場中的三維表面建模基于消費(fèi)者購物記錄的商品推薦去重方案關(guān)聯(lián)規(guī)則挖掘在游戲視頻銷售中的研究與應(yīng)用基于Three.js的機(jī)械產(chǎn)品自動裝配演示聚類算法及其在護(hù)理管理中的應(yīng)用研究基于伯努利大數(shù)定律的云存儲數(shù)據(jù)方法研究深入理解CSS3結(jié)構(gòu)偽類選擇器基于光機(jī)電一體化技術(shù)的文件智能交換方法研究過程與模型基于混合推理的高血壓藥物推薦模型研究基于NAS架構(gòu)的數(shù)據(jù)容災(zāi)備份系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)基于模糊樹的個性化電子學(xué)習(xí)推薦系統(tǒng)教育教學(xué)面向社會需求的軟件測試人才培養(yǎng)用MOOC來實(shí)現(xiàn)《數(shù)據(jù)結(jié)構(gòu)》課程CDIO教改的探討新工科+工程教育認(rèn)證背景下軟件工程特色專業(yè)建設(shè)探索面向新工科的軟件工程專業(yè)實(shí)踐教學(xué)模式的探索

例如：選擇器span：nth-child（3n-5）中，表達(dá)式3n-5的取值為{-5，-2，1，4，7，10，…}，位置索引不能為零和負(fù)值，所以-5、-2無效，這個選擇器匹配的子元素的位置索引為1、4、7、10…，而且必須是元素。在圖2中，位置索引為1的是元素，位置索引為7的是元素，位置索引10超出了子元素的數(shù)量范圍，所以，這個選擇器只匹配到位置索引為4的元素。

表達(dá)式an+b匹配元素的模式靈活多變，當(dāng)a、b取特殊值時，出現(xiàn)了一些有趣的應(yīng)用�？梢苑謅=0和a≠0兩種情況。

①a=0

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

元素的子元素。

②a≠0

a.當(dāng)a>0且b>0時

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

例如，假定圖2中元素?cái)U(kuò)展到10個列表項(xiàng)，則選擇器li：nth-child（3n+2），匹配的列表項(xiàng)的位置索引為{2，5，8，11，…}，可以理解為將兄弟元素分成每3個一組，10個元素可分成4組，最后一組，只有一個元素，然后選中每組中的第2個元素；也可以表述為，從第2個元素開始，每隔3個元素選中一個；所以，選擇器匹配位置索引為2、5、8的列表項(xiàng)。

如果要循環(huán)選中每組中的所有列表項(xiàng)，則選擇器可寫為：

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

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

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

b.當(dāng)a=1，b>0

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

c.當(dāng)a=-1，b>0

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

（2）關(guān)鍵字

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

4.3.2 其他帶參數(shù)結(jié)構(gòu)偽類

帶參數(shù)的結(jié)構(gòu)偽類除：nth-child（）外，還有：nth-last-child（）、：nth-of-type（）、：nth-last-of-type（），它們除位置索引的編排規(guī)則與：nth-child（）不同之外，用法和：nth-child（）相同。

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

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

中位置索引為倒數(shù)第5個，而且是

元素的子元素。

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

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

類型的兄弟元素。

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

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

類型的兄弟元素。

4.3.3 不帶參數(shù)結(jié)構(gòu)偽類

在匹配子元素的結(jié)構(gòu)偽類中，有六個不帶參數(shù)的結(jié)構(gòu)偽類。本質(zhì)上，它們是帶參數(shù)結(jié)構(gòu)偽類取特殊數(shù)值時的快捷寫法[3]，只用來匹配一個子元素。這種寫法更具語義，便于記憶。不帶參數(shù)結(jié)構(gòu)偽類的功能及與不帶參數(shù)結(jié)構(gòu)偽類的對應(yīng)關(guān)系見表1。

5 結(jié)論（Conclusion）

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

參考文獻(xiàn)（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.）.田永強(qiáng)，譯.響應(yīng)式Web設(shè)計(jì)：HTML5和CSS3實(shí)戰(zhàn)[M].北京：人民郵電出版社，2013：113-121.

[5] 大漠.圖解CSS3核心技術(shù)與案例實(shí)戰(zhàn)[M].北京：機(jī)械工業(yè)出版社，2014：312-357.

作者簡介：

黃志剛（1965-），男，本科，高級工程師.研究領(lǐng)域：Web技術(shù)，大數(shù)據(jù)技術(shù).

【深入理解CSS3結(jié)構(gòu)偽類選擇器】相關(guān)文章：

偽原創(chuàng)寫作技巧08-24

偽原創(chuàng)的寫作技巧08-24

深入思考作文02-07

深入靈魂的熱愛08-30

深入人心的句子10-20

深入人心的經(jīng)典句子11-04

深入靈魂的熱愛作文03-24

(精選)深入靈魂的熱愛作文10-31

【精選】深入靈魂的熱愛作文10-31

[精選]深入靈魂的熱愛作文11-01