CSS 后代選擇器
后代選擇器（descendant selector)又稱為包含選擇器，它可以選擇作為某元素后代的元素。
1.根據(jù)上下文選擇元素
可以定義后代選擇器以創(chuàng)建一些規(guī)則，使這些規(guī)則在某些文檔結構中起作用，而在另外一些結構中不起作用。舉例來說，如果希望只對hi元素中的em元素應用樣式，可以這樣寫：
hl em {color:red;}
上面這個規(guī)則，會把作為hi元素后代的em元素的文本變?yōu)榧t色，而其他em文本（如段落或塊引用中的em)則不會被這個規(guī)則選中，代碼如下：
<h1>This is a <em>importanl:</ein> heading</hl>
<p>This is a <em>important</era> paragraph.</p>
當然，這樣的效果也可以在hi中找到的每個em元素上放一個class屬性去實現(xiàn)，但是使用后代選擇器的效率會更高。
2.語法解釋
在后代選擇器中，規(guī)則左邊的選擇器一端包括兩個或多個用空格分隔的選擇器。選擇器之間的空格是一種結合符（combinator)。每個空格結合符可以解釋為“…在…找到”、作為…的一部分”、“…作為…的后代”，但是要求必須從右向左讀選擇器。
因此，h1 em選擇器可以解釋為“作為h1元素后代的任何em元素”。如果要從左向右讀選擇器，可以換成以下說法：“包含em的所有M會把以下樣式應用到該em”。
3.具體應用
后代選擇器的功能極其強大。有了它，可以使在HTML中將不可能實現(xiàn)的任務成為可能。
假設有一個文擋，其中有一個邊欄，還有一個主區(qū)。邊欄的背景為藍色，主區(qū)的背景為白色，這兩個區(qū)都包含鏈接列表。不能把所有鏈接都設置為藍色，因為這樣邊欄中的藍色鏈接都無法看到。
解決方法是使用后代選擇器。在這種情況下，可以為包含邊欄的div指定值為sidebar的class屬性，并把主區(qū)的class屬性值設置為maincontent,然后編寫以下樣式：
div.sidebar {background:blue;}
div.maincontent {background:white;}
div.sidebar a:link [color:white;}
div.maincontent a:link (color:blue;}
關于后代選擇器有一個易被忽視的方面，即兩個元素之間的層次間隔可以是無限的。
例如，如果寫作ul li,這個語法就會選擇從ul元素繼承的所有l(wèi)i元素，而不論li的嵌套層次有多深。
【例題】使用后代選擇器
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul li{
color:red;
}
</style>
</head>
<body>
<ul>
<li>第1部分
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ol>
</li>
<li>第2部分
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ol>
</li>
<li>第3部分
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ol>
</li>
<li>第4部分
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ol>
</li>
</ul>
</body>
</html>
從以上代碼的運行結果會發(fā)現(xiàn)，隸屬于ul元素下的所有l(wèi)i元素文字的顏色都變成了紅色，即便是ol元素下的li元素，也會跟著一起進行樣式的設置。代碼運行結果如圖所示。
湘公網(wǎng)安備:43011102000856號 
點擊加載更多評論>>