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

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

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

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

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

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

2.1 使用類(lèi)選擇器匹配元素

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

HTML代碼：

• 1
• 2
• 3

CSS代碼：

/*通過(guò)類(lèi)選擇器匹配第一個(gè)列表項(xiàng)*/

li.first {background-color：red；}

/*通過(guò)類(lèi)選擇器匹配最后一個(gè)列表項(xiàng)*/

li.last {background-color：red；}

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

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

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

HTML代碼：

• 1
• 2
• 3

CSS代碼：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

①a=0

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

元素的子元素。

②a≠0

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

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

例如，假定圖2中

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

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

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

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

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

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”的語(yǔ)義化表示。

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

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

（1）：nth-last-child（）偽類(lèi)

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

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

元素的子元素。

（2）：nth-of-type（）偽類(lèi)

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

類(lèi)型的兄弟元素。

（3）：nth-last-of-type（）偽類(lèi)

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

類(lèi)型的兄弟元素。

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

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

5 結(jié)論（Conclusion）

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

參考文獻(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.

作者簡(jiǎn)介：

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