董桃利
摘要:隨著網(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所示);……