后代選擇器（descendant selector）又稱為包含選擇器。

后代選擇器可以選擇作為某元素后代的元素。

我們可以定義后代選擇器來創建一些規則，使這些規則在某些文檔結構中起作用，而在另外一些結構中不起作用。

舉例來說，如果您希望只對 h1 元素中的 em 元素應用樣式，可以這樣寫：

h1 em {color:red;}

上面這個規則會把作為 h1 元素后代的 em 元素的文本變為 紅色。其他 em 文本（如段落或塊引用中的 em）則不會被這個規則選中：

 h1 This is a em important /em heading /h1  p This is a em important /em paragraph. /p 

親自試一試

當然，您也可以在 h1 中找到的每個 em 元素上放一個 html' target='_blank'>class 屬性，但是顯然，后代選擇器的效率更高。

在后代選擇器中，規則左邊的選擇器一端包括兩個或多個用空格分隔的選擇器。選擇器之間的空格是一種結合符（combinator）。每個空格結合符可以解釋為“... 在 ... 找到”、“... 作為 ... 的一部分”、“... 作為 ... 的后代”，但是要求必須從右向左讀選擇器。

因此，h1 em 選擇器可以解釋為 “作為 h1 元素后代的任何 em 元素”。如果要從左向右讀選擇器，可以換成以下說法：“包含 em 的所有 h1 會把以下樣式應用到該 em”。

假設有一個文檔，其中有一個邊欄，還有一個主區。邊欄的背景為藍色，主區的背景為白色，這兩個區都包含鏈接列表。不能把所有鏈接都設置為藍色，因為這樣一來邊欄中的藍色鏈接都無法看到。

解決方法是使用后代選擇器。在這種情況下，可以為包含邊欄的 div 指定值為 sidebar 的 class 屬性，并把主區的 class 屬性值設置為 maincontent。然后編寫以下樣式：

div.sidebar {background:blue;}div.maincontent {background:white;}div.sidebar a:link {color:white;}div.maincontent a:link {color:blue;}

有關后代選擇器有一個易被忽視的方面，即兩個元素之間的層次間隔可以是無限的。

例如，如果寫作 ul em，這個語法就會選擇從 ul 元素繼承的所有 em 元素，而不論 em 的嵌套層次多深。

因此，ul em 將會選擇以下標記中的所有 em 元素：

 li List item 1 li List item 1-1 /li  li List item 1-2 /li  li List item 1-3 li List item 1-3-1 /li  li List item em 1-3-2 /em /li  li List item 1-3-3 /li  /ol  /li  li List item 1-4 /li  /ol  /li  li List item 2 /li  li List item 3 /li  /ul 

親自試一試

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。