技術(shù)報(bào)告深入理解CSS結(jié)構(gòu)偽類選擇器

1、計(jì)劃類別 項(xiàng)目編號(hào) 項(xiàng)目技術(shù)報(bào)告課題名稱 項(xiàng)目主持人 承擔(dān)單位 題目：深入理解CSS3結(jié)構(gòu)偽類選擇器本文從結(jié)構(gòu)偽類與類選擇器的比較、結(jié)構(gòu)偽類與文檔樹(shù)的關(guān)系、結(jié)構(gòu)偽類的功能與應(yīng)用等三個(gè)層面，深入闡述了結(jié)構(gòu)偽類的作用，結(jié)構(gòu)偽類所表示的文檔樹(shù)結(jié)構(gòu)，結(jié)構(gòu)偽類通過(guò)位置索引定位子元素的機(jī)制。通過(guò)將定位子元素的結(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)偽類；文檔樹(shù)；位置索引Abstract：The article describes deeply the function of the structural pseudo

2、-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 pseud

3、o-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 p

4、arameters 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 index1 引言（Introduction）CSS（Cascading Style Sheets）即層疊樣式表，是用于控制網(wǎng)頁(yè)顯示效果的技術(shù)。選擇器是匹配網(wǎng)頁(yè)元素的模式1，它作為樣式表的基本組成部分，用于匹配網(wǎng)頁(yè)中的元

5、素。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ī)范新引入的一類選擇器，它基于文檔樹(shù)的結(jié)構(gòu)信息匹配元素1，功能強(qiáng)大、最具特色，但也較難理解和使用。2 結(jié)構(gòu)偽類與類選擇器（Structural pseudo-classes and class selectors）在CSS3之前，為給網(wǎng)頁(yè)元素設(shè)置樣式，W

6、eb開(kāi)發(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代碼：123CSS代碼：/*通過(guò)類選擇器匹配第一個(gè)列表項(xiàng)*/l

7、i.first background-color：red；/*通過(guò)類選擇器匹配最后一個(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代碼：123CSS代碼：/*通過(guò)結(jié)構(gòu)偽類匹配第一個(gè)列表項(xiàng)*/li：first -childbackground-color：red；/*通過(guò)結(jié)構(gòu)偽類匹配最后一個(gè)列表項(xiàng)*/l

8、i：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)偽類與文檔樹(shù)（Structural pseudo-classes & document tree）所有的結(jié)構(gòu)偽類都基于HTML文檔樹(shù)（Document Tree）的結(jié)構(gòu)信息，文檔樹(shù)也稱為文檔對(duì)象模型（Document Object Model，DOM）。當(dāng)創(chuàng)建一個(gè)HT

9、ML文檔（圖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è)元素的稱謂可能是父元素、子元素、祖先元素、后代元素和兄弟元素。3.1.1 父子關(guān)系、父元素和子元素在文檔樹(shù)的層級(jí)結(jié)構(gòu)中，如果從一個(gè)元素到另一個(gè)元素的路徑，處于兩個(gè)相鄰層級(jí)，那么，這兩個(gè)元素是父子關(guān)系。位于上

10、面層級(jí)的是父元素，位于下面層級(jí)是子元素。例如：在圖2中，元素是元素的父元素，反之，元素是元素的子元素。3.1.2 祖先后代關(guān)系、祖先元素和后代元素在文檔樹(shù)的層級(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中

11、，元素、元素、元素、元素都是元素的子元素，是兄弟關(guān)系，互為兄弟元素。3.2 結(jié)構(gòu)偽類中的結(jié)構(gòu)信息CSS3定義了12個(gè)結(jié)構(gòu)偽類，它們分別表示文檔樹(shù)的三種結(jié)構(gòu)，定位三種元素。（1）：root pseudo-class（根偽類），表示文檔樹(shù)的根節(jié)點(diǎn)，用來(lái)定位根元素。在HTML文檔中，html元素就是根元素，用來(lái)表示整個(gè)網(wǎng)頁(yè)。（2）：empty pseudo-class（空偽類），表示文檔樹(shù)的空節(jié)點(diǎn)，用來(lái)定位空元素?？展?jié)點(diǎn)是指既沒(méi)有文本子節(jié)點(diǎn)，也沒(méi)有元素子節(jié)點(diǎn)的節(jié)點(diǎn)，例如，在圖2中，第三個(gè)元素和元素就是空元素（3）：nth-child（）等其余10個(gè)結(jié)構(gòu)偽類，表示文檔樹(shù)父子關(guān)系中的子元素節(jié)點(diǎn)，通過(guò)子元

12、素的位置信息定位子元素。例如：在圖2中，元素有7個(gè)子元素，p：nth-child（3）表示匹配第3個(gè)子元素，而且，這個(gè)元素必須是元素。4 結(jié)構(gòu)偽類功能及應(yīng)用（Functions and applicationsof 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ù)的根元素。例如，要設(shè)置整個(gè)頁(yè)面的背景顏色為藍(lán)色，則CSS代碼可寫

13、成：root background-color： blue； 或?qū)懗蒱tml：root background-color： blue；4.2 定位空元素空偽類（：empty pseudo-class）用來(lái)定位文檔樹(shù)中的空元素。如果要匹配圖2中的空段落，為其設(shè)置背景顏色，則CSS代碼可寫成：p：emptybackground-color： blue；如果要匹配圖2中的所有空元素（一個(gè)元素和一個(gè)元素），為它們?cè)O(shè)置背景顏色，則CSS代碼可寫成：emptybackground-color： blue；4.3 定位子元素匹配子元素的結(jié)構(gòu)偽類共10個(gè)，可分為帶參數(shù)和不帶參數(shù)兩類。4.3.1 帶參數(shù)結(jié)構(gòu)偽類

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

15、引為1，元素的位置索引為7。 偽類參數(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í)，就沒(méi)有元素可選，其值也可忽略。123存入我的閱覽室軟件工程2018年03期方法與技術(shù)基于改進(jìn)型遺傳算法求解高校排課問(wèn)題UML活動(dòng)圖的正確性檢測(cè)剖面數(shù)據(jù)場(chǎng)中的三維表面建模基于消費(fèi)者購(gòu)物記錄的商品推薦去重

16、方案關(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ù)的文件智能交換方法研究過(guò)程與模型基于混合推理的高血壓藥物推薦模型研究基于NAS架構(gòu)的數(shù)據(jù)容災(zāi)備份系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)基于模糊樹(shù)的個(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

17、的取值為-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和a0兩種情況。a=0當(dāng)a=0，b1時(shí)，an+b的值是一個(gè)常數(shù)，表示匹配位置索引的值為b的子元素。例如：p：nth-child（3），表達(dá)式中，a=0，b=3，表示匹配位置索引為3而且是元素的子元素。a0a.當(dāng)a0且b0時(shí)表

18、達(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)，則選擇器可寫為：li：nth-child（3n+1），匹配每組中

19、的第一個(gè)子元素；li：nth-child（3n+2），匹配每組中的第二個(gè)子元素；li：nth-child（3n+3），匹配每組中的第三個(gè)子元素。b.當(dāng)a=1，b0假設(shè)b=6，則表達(dá)式為n+6，取值集合為6，7，8，9，所以，選擇器li：nth-child（n+6）將匹配位置索引大于等于6的所有元素。c.當(dāng)a=-1，b0假設(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ù)的子元素。例如，

20、在圖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（）偽類

21、：nth-last-child（）偽類的位置索引的編排規(guī)則是，從倒數(shù)第一個(gè)元素開(kāi)始，對(duì)所有兄弟元素建立索引。例如，在圖2中，選擇器p：nth-last-child（5），表示在所有兄弟元素中，選中位置索引為倒數(shù)第5個(gè)，而且是元素的子元素。（2）：nth-of-type（）偽類：nth-of-type（）偽類的位置索引的編排規(guī)則是，從同類型兄弟元素中的第一個(gè)開(kāi)始建立索引，元素類型由偽類前的元素選擇器決定。例如，在圖2中，選擇器p：nth-of-type（3），表示選擇第3個(gè)類型的兄弟元素。（3）：nth-last-of-type（）偽類：nth-last-of-type（）偽類的位置索引的編排規(guī)則是，從倒數(shù)第一個(gè)同類型兄弟元素開(kāi)始建立索引，元素類型由偽類前的元素選擇器決定。例如，在圖2中，選擇器p：nth-last-of-type（3），表示選擇倒數(shù)第3個(gè)類型的兄弟元素。4.3.3 不帶參數(shù)結(jié)構(gòu)偽類在匹配子元素的結(jié)構(gòu)偽類中，有六個(gè)不帶參