《HTML 5與CSS 3 權威指南（第4版·下冊）》 —16.3.2　選擇器root、not、empty和target

16.3.2　選擇器root、not、empty和target

在介紹完了CSS中的偽類選擇器與偽元素選擇器之后，讓我們來看一下CSS 3中的結構性偽類選擇器。結構性偽類選擇器的共同特征是允許開發者根據文檔樹中的結構來指定元素的樣式。

首先，我們來看4個最基本的結構性偽類選擇器—root選擇器、not選擇器、empty選擇器與target選擇器。

1. root選擇器

root選擇器將樣式綁定到頁面的根元素中。根元素是指位于文檔樹中最頂層結構的元素，在HTML頁面中就是指包含著整個頁面的“”部分。

代碼清單16-8為一個HTML頁面，在該頁面中，有一段文章，并且有一個文章的標題。

代碼清單16-8　root選擇器示例的HTML界面

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

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

圖16-10　root選擇器使用示例

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

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

圖16-11　刪除root選擇器后的顯示效果

2.not選擇器

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

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

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

3. empty選擇器

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

代碼清單16-9　empty選擇器使用示例

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

圖16-12　使用not選擇器示例 圖16-13　使用empty選擇器示例

4.target選擇器

使用target選擇器來對頁面中某個target元素（該元素的id被當作頁面中的超鏈接來使用）指定樣式，該樣式只在用戶點擊了頁面中的超鏈接，并且跳轉到target元素后起作用。

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

target{

background-color: yellow;

}

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

代碼清單16-10　target選擇器使用示例

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

圖16-14　使用target選擇器示例

css HTML5 html

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。