4.3 層次選擇器

層次選擇器是通過html的DOM元素間的層次關系獲取元素，主要層次關系有后代、父子、相鄰兄弟和通用兄弟。

4.3.1 包含選擇器

包含選擇器又叫后代選擇器，作用的是選擇元素的后代元素，包括子元素、子元素的子元素等，以此類推。包含選擇器與子元素選擇器之間使用空格來表示關系。假如給<div>元素中的<p>元素添加黃色背景，就可以使用后代選擇器。

【例4-4】（實例文件：ch04\Chap4.4.html）包含選擇器。

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

4.3.2 子選擇器

子選擇器用來選擇一個父元素直接的子元素，不包括子元素的子元素，它的符號為大于號“>”，請注意這個選擇器與后代選擇器的區(qū)別，子選擇器（child selector）僅是指它的直接后代，或者可以理解為作用于子元素的第一個后代；而后代選擇器是作用于所有子后代元素。后代選擇器通過空格來進行選擇。

【例4-5】（實例文件：ch04\Chap4.5.html）子選擇器。

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

4.3.3 CSS 3新增的兄弟選擇器

兄弟選擇器用來設置某個選擇器兄弟元素的樣式。兄弟選擇器有兩種方式，一種是選擇元素后面一個兄弟元素，用“+”連接選擇器；另一種是選擇元素后面同一類指定的兄弟元素，用“～”連接選擇器。

【例4-6】（實例文件：ch04\Chap4.6.html）兄弟選擇器。

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