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