19.3.2 選擇器root、not、empty和target

在介紹完了CSS中的偽類選擇器與偽元素選擇器之后，讓我們來看一下CSS 3中的結構性偽類選擇器。結構性偽類選擇器的共同特征是允許開發者根據文檔樹中的結構來指定元素的樣式。
首先，我們來看4個最基本的結構性偽類選擇器—root選擇器、not選擇器、empty選擇器與target選擇器。

1.root選擇器

root選擇器將樣式綁定到頁面的根元素中。根元素是指位于文檔樹中最頂層結構的元素，在HTML頁面中就是指包含著整個頁面的“”部分。
代碼清單19-8為一個HTML頁面，在該頁面中，有一段文章，并且有一個文章的標題。

針對這個網頁，使用如下所示的root選擇器來指定整個網頁的背景色為黃色，將網頁中body元素的背景色設為綠色。

background-color: yellow;

}
body{

background-color: limegreen;

}

使用了root選擇器后的運行結果如圖19-10所示。

另外，在使用樣式指定root元素與body元素的背景時，根據不同的指定條件背景色的顯示范圍會有所變化，這一點請注意。如同樣是上面這個示例，如果采取如下所示的樣式，不使用root選擇器來指定root元素的背景色，只指定body元素的背景色，則整個頁面就全部變成綠色的了。

background-color: limegreen;

}

刪除root選擇器后的頁面如圖19-11所示。

2.not選擇器
如果想對某個結構元素使用樣式，但是想排除這個結構元素下面的子結構元素，讓它不使用這個樣式時，可以使用not選擇器。

譬如針對代碼清單19-8所示的HTML頁面，我們可以使用“body ”語句來指定body元素的背景色為黃色，但是使用“:not(h1)”語句中使用的not選擇器排除h1元素，代碼如下所示。

background-color: yellow;

}

使用not選擇器后的運行結果如圖19-12所示。

3.empty選擇器

使用empty選擇器來指定當元素中內容為空白時使用的樣式。例如，在代碼清單13-9所示的HTML頁面中，有一個表格。可以使用empty選擇器來指定當表格中某個單元格內容為空白時，該單元格背景為黃色。

使用empty選擇器后的運行結果如圖19-13所示。

4.target選擇器

使用target選擇器來對頁面中某個target元素（該元素的id被當做頁面中的超鏈接來使用）指定樣式，該樣式只在用戶點擊了頁面中的超鏈接，并且跳轉到target元素后起作用。
接下來我們來看一個target選擇器的使用示例。頁面中包含幾個div元素，每個div元素都存在一個書簽，當用戶點擊了頁面中的超鏈接跳轉到該div元素時，該div元素使用target選擇器中指定的樣式，在target選擇器中，指定該div元素的背景色變為黃色。其中指定target選擇器時的代碼如下所示。
target{

background-color: yellow;

}
該示例的詳細代碼如代碼清單19-10所示。

使用target選擇器后的運行結果如圖19-14所示。

19.3.3 選擇器：first-child、last-child、nth-child和nth-last-child

本節介紹first-child選擇器、last-child選擇器、nth-child選擇器與nth-last-child選擇器。利用這幾個選擇器，能夠特別針對一個父元素中的第一個子元素、最后一個子元素、指定序號的子元素，甚至第偶數個或第奇數個子元素進行樣式的指定。

1.單獨指定第一個子元素、最后一個子元素的樣式
接下來，讓我們看一個示例。該示例對ul列表中的li列表項目進行樣式的指定，在樣式中對第一個列表項目與最后一個列表項目分別指定不同的背景色。

如果要對第一個列表項目與最后一個列表項目分別指定不同的背景色，目前為止采取的做法都是：分別給這兩個列表項目加上class屬性，然后對這兩個class使用不同的樣式，在兩個樣式中分別指定不同的背景色。但是，如果使用first-child選擇器與last-child選擇器，這個多余的class屬性就不需要了。

接下來，我們在代碼清單19-11中看一下如何使用first-child選擇器與last-child選擇器將第一個列表項目的背景色指定為黃色，將最后一個列表項目的背景色設定為淺藍色。

這段代碼的運行結果如圖19-15所示。

另外，如果頁面中具有多個ul列表，則該first-child選擇器與last-child選擇器對所有ul列表都適用，如代碼清單19-12所示。

這段代碼的運行結果如圖19-16所示。

另外，first-child選擇器在CSS 2中就已存在，目前為止被Firefox、Safari、Google Chrome、Opera瀏覽器所支持，從IE7開始被IE瀏覽器所支持。

Last-child選擇器從CSS 3開始被提供，目前為止被Firefox、Safari、Google Chrome、Opera瀏覽器所支持，到IE 8為止還沒有獲得IE瀏覽器的支持。

2.對指定序號的子元素使用樣式

如果使用nth-child選擇器與nth-last-child選擇器，不僅可以指定某個父元素中第一個子元素以及最后一個子元素的樣式，還可以針對父元素中某個指定序號的子元素來指定樣式。這兩個選擇器是first-child及last-child的擴展選擇器。這兩個選擇器的樣式指定方法如下所示。
nth-child(n){
//指定樣式
}
<子元素>：nth-last-child(n){
//指定樣式
}
將指定序號書寫在“nth-child”或“nth-last-child”后面的括號中，如“nth-child(3)”表示第三個子元素，“nth-last-child(3)”表示倒數第三個子元素。
在代碼清單19-13 中，我們給出一個使用這兩個選擇器的示例，在該示例中，指定ul列表中第二個li列表項目的背景色為黃色，倒數第二個列表項目的背景色為淺藍色。

這段代碼的運行結果如圖19-17所示。

另外，這兩個選擇器都是從CSS 3開始被提供，目前為止被Firefox、Safari、Google Chrome、Opera瀏覽器所支持，到IE 8為止還沒有受到IE瀏覽器的支持。

對所有第奇數個子元素或第偶數個子元素使用樣式
除了對指定序號的子元素使用樣式以外，nth-child選擇器與nth-last-child選擇器還可以用來對某個父元素中所有第奇數個子元素或第偶數個子元素使用樣式。使用方法如下所示。

nth-child(odd){
//指定樣式
}
//所有正數下來的第偶數個子元素
<子元素>:nth-child(even){
//指定樣式
}
//所有倒數上去的第奇數個子元素
<子元素>:nth-last-child(odd){
//指定樣式
}
//所有倒數上去的第偶數個子元素
<子元素>:nth-last-child(even){
//指定樣式
}
接下來，我們在代碼清單19-14中看一個使用nth-child選擇器來分別針對ul列表的第奇數個列表項目與第偶數個列表項目指定不同背景色的示例。在該示例中將所有第奇數個列表項目的背景色設為黃色，將所有第偶數個列表項目的背景色設為淺藍色。

這段代碼的運行結果如圖19-18所示。

另外，使用nth-child選擇器與nth-last-child選擇器時，雖然在對列表項目使用時沒有問題，但是當用于其他元素時，還是會出現問題，在19.3.4節中，我們將闡述會產生哪些問題，以及怎么解決這些問題。

總結

以上是生活随笔為你收集整理的《HTML 5与CSS 3权威指南 》 （第2版·下册）——第19章 19.3.2的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。