現(xiàn)在位置：范文先生網(wǎng)>理工論文>計(jì)算機(jī)信息技術(shù)>深入理解CSS3結(jié)構(gòu)偽類選擇器

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

時(shí)間：2022-08-18 09:34:18 計(jì)算機(jī)信息技術(shù) 我要投稿

相關(guān)推薦

摘要：本文從結(jié)構(gòu)偽類與類選擇器的比較、結(jié)構(gòu)偽類與文檔樹的關(guān)系、結(jié)構(gòu)偽類的功能與應(yīng)用等三個(gè)層面，深入闡述了結(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)偽類的對(duì)應(yīng)關(guān)系。

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

中圖分類號(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)偽類（Structural Pseudo-classes）選擇器（規(guī)范中簡(jiǎn)稱結(jié)構(gòu)偽類）是CSS3選擇器規(guī)范新引入的一類選擇器，它基于文檔樹的結(jié)構(gòu)信息匹配元素[1]，功能強(qiáng)大、最具特色，但也較難理解和使用。

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

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

2.1 使用類選擇器匹配元素

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

HTML代碼：123

CSS代碼：

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

li.first {background-color：red；}

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

li.last {background-color：red；}

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

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

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

HTML代碼：123

CSS代碼：

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

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

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

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

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

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

所有的結(jié)構(gòu)偽類都基于HTML文檔樹（Document Tree）的結(jié)構(gòu)信息，文檔樹也稱為文檔對(duì)象模型（Document Object Model，DOM）。當(dāng)創(chuàng)建一個(gè)HTML文檔（圖1）并用Web瀏覽器查看時(shí)，瀏覽器把文檔中元素間的嵌套關(guān)系映射為一個(gè)樹形節(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)，樹中的每個(gè)節(jié)點(diǎn)都處于文檔整體結(jié)構(gòu)的某個(gè)層級(jí)（本文所說(shuō)元素均指元素節(jié)點(diǎn)）。文檔樹中位于同一個(gè)分支的元素間的關(guān)系，有祖先后代關(guān)系、父子關(guān)系和兄弟關(guān)系。在不同的上下文中，對(duì)同一個(gè)元素的稱謂可能是父元素、子元素、祖先元素、后代元素和兄弟元素。

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

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

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

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

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

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

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

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

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

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

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

元素和元素就是空元素

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

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

元素。

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

of the structural pseudo-classes）

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

4.1 定位根元素

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

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

html：root {background-color： blue；}

4.2 定位空元素

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

p：empty{background-color： blue；}

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

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

：empty{background-color： blue；}

4.3 定位子元素

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

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

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

4.3.1.1 位置索引

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

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

4.3.1.2 偽類參數(shù)

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

（1）表達(dá)式

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

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

《軟件工程》

2018年03期

方法與技術(shù)基于改進(jìn)型遺傳算法求解高校排課問題UML活動(dòng)圖的正確性檢測(cè)剖面數(shù)據(jù)場(chǎng)中的三維表面建�；谙M(fèi)者購(gòu)物記錄的商品推薦去重方案關(guān)聯(lián)規(guī)則挖掘在游戲視頻銷售中的研究與應(yīng)用基于Three.js的機(jī)械產(chǎn)品自動(dòng)裝配演示聚類算法及其在護(hù)理管理中的應(yīng)用研究基于伯努利大數(shù)定律的云存儲(chǔ)數(shù)據(jù)方法研究深入理解CSS3結(jié)構(gòu)偽類選擇器基于光機(jī)電一體化技術(shù)的文件智能交換方法研究過程與模型基于混合推理的高血壓藥物推薦模型研究基于NAS架構(gòu)的數(shù)據(jù)容災(zāi)備份系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)基于模糊樹的個(gè)性化電子學(xué)習(xí)推薦系統(tǒng)教育教學(xué)面向社會(huì)需求的軟件測(cè)試人才培養(yǎng)用MOOC來(lái)實(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無(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è)元素開始，每隔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è)元素開始，每隔3個(gè)元素選中一個(gè)；所以，選擇器匹配位置索引為2、5、8的列表項(xiàng)。

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

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)偽類

帶參數(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ù)第一個(gè)元素開始，對(duì)所有兄弟元素建立索引。例如，在圖2中，選擇器p：nth-last-child（5），表示在所有兄弟元素中，選

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

元素的子元素。

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

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

類型的兄弟元素。

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

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

類型的兄弟元素。

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

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

5 結(jié)論（Conclusion）

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

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

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

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

深入思考作文02-07