剖析CSS3結(jié)構(gòu)化選擇器

董桃利

摘要：隨著網(wǎng)頁技術(shù)的發(fā)展，在整個網(wǎng)站開發(fā)過程中，前端開發(fā)技術(shù)得到了廣大編程學(xué)習(xí)者的追捧，CSS3是前端技術(shù)的基礎(chǔ)也是核心，然而很多編程者在使用CSS3結(jié)構(gòu)化偽類選擇器時經(jīng)常編碼出錯，該文結(jié)合實例由淺及深的對CSS3結(jié)構(gòu)化偽類選擇器進行闡述。

關(guān)鍵詞：前端技術(shù)；CSS3；結(jié)構(gòu)化選擇器

中圖分類號：TP393.092 文獻標(biāo)識碼：A 文章編號：1007-9416（2018）04-0168-01

隨著網(wǎng)頁技術(shù)的發(fā)展，在整個網(wǎng)站開發(fā)過程中，前端開發(fā)技術(shù)得到了廣大編程學(xué)習(xí)者的追捧，CSS3是前端技術(shù)的基礎(chǔ)也是核心，CSS選擇器又是CSS的重中之重。結(jié)構(gòu)化偽類選擇器是CSS3中新增的選擇器，CSS3與HTML5完美結(jié)合可以滿足不同用戶的需求，結(jié)構(gòu)化選擇器越來越受到編程愛好者的喜愛，然而在應(yīng)用過程中常常出現(xiàn)一些小問題導(dǎo)致編碼錯誤，使學(xué)習(xí)者不知所措。在前端技術(shù)開發(fā)中，CSS3常用的結(jié)構(gòu)化偽類選擇器有以下幾種：文檔根元素選擇器：root；排除結(jié)構(gòu)元素選擇器：not；唯一子元素選擇器E：only-child；first子元素選擇器E：first-child；last子元素選擇器E：last-child；子元素選擇器E：nth-child（n）；個子元素選擇器E：nth-of-type（n）；空元素選擇器E：empty；超鏈接目標(biāo)元素選擇器E：target。本文主要對前端頁面開發(fā)中用途最廣、使用最頻繁、最容易混肴出錯的E：nth-of-type（n）和E：nth-child（n）選擇器進行剖析闡述。

1 子元素選擇器E：nth-of-type（n）

在E：nth-of-type（n）中，n通常的取值有三種情況。第一種：n取值為整數(shù)；第二種：n取值odd或2n+1表示取奇數(shù)；第三種：n取值2n或even表示取偶數(shù)。下面以h2：nth-of-type（odd）代碼段為例，對E：nth-of-type（n）代碼進行解讀剖析：在執(zhí)行過程中，首先，是尋找代碼段h2：nth-of-type（odd）的父元素標(biāo)簽；其次，查找代碼段h2：nth-of-type（odd）父元素的所有h2子元素，即h2：nth-of-type（odd）的所有親兄弟元素，并對其進行排序（排序結(jié)果如表1-1所示）；最后，對已進行排序的h2所有奇數(shù)親兄弟元素，應(yīng)用指定效果。代碼及運行效果圖如表1-1所示。

2 子元素選擇器E：nth-child（n）

在E：nth-child（n）中，n取值通常也有三種，取值和E：nth-of-type（n）相同，但應(yīng)用卻差異較大。下面對E：nth-child（n）代碼解讀剖析，以h2：nth-child（odd）代碼段為例：在執(zhí)行過程中，首先，尋找代碼段h2：nth-child（odd）的父元素標(biāo)簽；其次，查找代碼段h2：nth-child（odd）父元素的所有子元素，注意這里是所有子元素，其中也包括不是h2標(biāo)簽的子元素，即h2：nth-child（odd）標(biāo)簽的所有兄弟元素，對其進行排序（排序結(jié)果如表2-1所示）；最后，對已進行排序的h2所有奇數(shù)兄弟元素，應(yīng)用指定效果。代碼及運行效果圖如表2-1所示。

通過上述兩段代碼的對比、剖析、總結(jié)、學(xué)習(xí)得出，CSS3偽類選擇器E：nth-of-type（n）和E：nth-child（n）在應(yīng)用中兩個的核心區(qū)別為：前者是檢索父元素的所有子元素，后者檢索父元素中親兄弟的子元素，理解透徹了這一點，這兩種選擇的在應(yīng)用中就不會再出現(xiàn)編碼錯誤的問題。

3 結(jié)語

該文通過兩個具體實例，對CSS3中的E：nth-of-type（n）和E：nth-child（n）兩個結(jié)構(gòu)化偽類選擇器進行了詳細(xì)具體的講解，由淺入深，內(nèi)容詳實可靠。

參考文獻

[1]顏加瓊.剖析CSS選擇器[J].電腦知識與技術(shù)，2011，（02）：435-436.

[2]李小雪，蔡雅娟.淺析CSS在網(wǎng)頁制作中的作用[J].農(nóng)村經(jīng)濟與科技，2016，（14）：276.

[3]郭新春.利用CSS美化網(wǎng)頁圖片的思路和方法[J].電腦編程技巧與維護，2017，（09）：77-79.

[4]溫謙.CSS網(wǎng)頁設(shè)計標(biāo)準(zhǔn)教程[M].人民郵電出版社，2009，（03）.