剖析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)化偽類選擇器進(jìn)行闡述。

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

中圖分類號：TP393.092 文獻(xiàn)標(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）選擇器進(jì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）代碼進(jìn)行解讀剖析：在執(zhí)行過程中，首先，是尋找代碼段h2：nth-of-type（odd）的父元素標(biāo)簽；其次，查找代碼段h2：nth-of-type（odd）父元素的所有h2子元素，即h2：nth-of-type（odd）的所有親兄弟元素，并對其進(jìn)行排序（排序結(jié)果如表1-1所示）；……