4.5 CSS 3新增的偽類選擇器

偽類選擇器主要用于對選擇器進行限制，對已有選擇器匹配到的元素進行過濾。下面將詳細介紹其中的一部分。

4.5.1 結構性偽類選擇器

結構性偽類選擇器是指運用文檔結構樹來實現元素過濾，簡單來說，就是利用文檔結構之間的相互關系來匹配制定的元素，用來減少文檔內對class屬性以及ID屬性的定義，從而可以使整個文檔更加簡練。結構性偽類選擇器種類如表4-2所示。

下面使用其中的幾個選擇器，來介紹它們的用法。

【例4-14】（實例文件：ch04\Chap4.14.html）結構性偽類選擇器。

相關的代碼實例請參考Chap4.14.html文件，在IE瀏覽器中運行的結果如圖4-18所示。

4.5.2 UI元素狀態偽類選擇器

UI元素狀態偽類選擇器就是指定的樣式只有當元素處于某種狀態時，樣式才起作用，在默認狀態下不起作用。常見的有:hover、:active、:focus、:enable、:disable、:read-only、:read-write、:checked、:default、:indeterminate、:selection等。

1．:hover、:active、:focus

:hover表示鼠標指針懸浮時的樣式，:active表示按下鼠標左鍵且不松開時的樣式，:focus表示鼠標指針獲得焦點或者進行輸入時的樣式。它們編寫的順序不要寫反，否則不會顯示效果，正確順序為:hover、:focus、:active。

【例4-15】（實例文件：ch04\Chap4.15.html）:hover、:active、:focus實例。

相關的代碼實例請參考Chap4.15.html文件，在IE瀏覽器中運行的結果如圖4-19所示。

2．:checked、:selection

:checked是用來指定當表單中的radio單選按鈕、checkbox復選框處于選中狀態時的樣式。:selection偽類選擇器用來指定當元素處于選中狀態時的樣式。

【例4-16】（實例文件：ch04\Chap4.16.html）:checked、:selection實例。

相關的代碼實例請參考Chap4.16.html文件，在IE瀏覽器中運行的結果如圖4-20所示。選中元素時，頁面效果如圖4-21所示。

4.5.3 目標（:target）偽類選擇器

目標偽類選擇器:target是CSS 3新增偽類選擇器之一，用來匹配文檔中被相關URL指向的目標元素。目標偽類選擇器是動態選擇器，只有存在URL指向該匹配元素時，樣式效果才會生效。

具體來說，URL中的標志通常會包含一個#，后面帶有一個標志符名稱，如#box,:target就是匹配ID為"box"的目標元素。

如一個頁面中有一個<a>標簽，它的href是<a href="#box">內容</a> ，同一個頁面中也會有以box為id的元素，<div id="box ">標題</div>。

那么<a>標簽的href屬性會鏈接到#box元素，也就是box:target選擇符所選的目標元素，當a鏈接到這個元素的時候，它所指定的樣式就是目標元素的樣式。

【例4-17】（實例文件：ch04\Chap4.17.html）:target偽類選擇器實例。

相關的代碼實例請參考Chap4.17.html文件，在IE瀏覽器中運行的結果如圖4-22所示。當點擊“第一章的題目是什么”鏈接時，頁面變成如圖4-23所示的效果。

4.5.4 否定（:not）偽類選擇器

否定偽類選擇器用于過濾掉含有某個選擇器的元素，如p:not(#box),就是過濾掉id為#box的p元素。

【例4-18】（實例文件：ch04\Chap4.18.html）:not偽類選擇器實例。

相關的代碼實例請參考Chap4.18.html文件，在IE瀏覽器中運行的結果如圖4-24所示。