剖析CSS3結構化選擇器

董桃利

摘要：隨著網頁技術的發展，在整個網站開發過程中，前端開發技術得到了廣大編程學習者的追捧，CSS3是前端技術的基礎也是核心，然而很多編程者在使用CSS3結構化偽類選擇器時經常編碼出錯，該文結合實例由淺及深的對CSS3結構化偽類選擇器進行闡述。

關鍵詞：前端技術；CSS3；結構化選擇器

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

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

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

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

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

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

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

3 結語

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

參考文獻

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

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

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

[4]溫謙.CSS網頁設計標準教程[M].人民郵電出版社，2009，（03）.