根據(jù)上下文選擇元素

我們可以定義后代選擇器來(lái)創(chuàng)建一些規(guī)則，使這些規(guī)則在某些文檔結(jié)構(gòu)中起作用，而在另外一些結(jié)構(gòu)中不起作用。

舉例來(lái)說(shuō)，如果您希望只對(duì) h1 元素中的 em 元素應(yīng)用樣式，可以這樣寫(xiě)：

h1 em {color:red;}

上面這個(gè)規(guī)則會(huì)把作為 h1 元素后代的 em 元素的文本變?yōu)?紅色。其他 em 文本（如段落或塊引用中的 em）則不會(huì)被這個(gè)規(guī)則選中：

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

親自試一試

當(dāng)然，您也可以在 h1 中找到的每個(gè) em 元素上放一個(gè) class 屬性，但是顯然，后代選擇器的效率更高。

語(yǔ)法解釋

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

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

具體應(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ái)邊欄中的藍(lán)色鏈接都無(wú)法看到。

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

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ú)限的。

例如，如果寫(xiě)作 ul em，這個(gè)語(yǔ)法就會(huì)選擇從 ul 元素繼承的所有 em 元素，而不論 em 的嵌套層次多深。

因此，ul em 將會(huì)選擇以下標(biāo)記中的所有 em 元素：

<ul>
  <li>List item 1
    <ol>
      <li>List item 1-1</li>
      <li>List item 1-2</li>
      <li>List item 1-3
        <ol>
          <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>

親自試一試