Design Code 設計密碼

派生選擇器

通過依據元素在其位置的上下文關係來定義樣式，你可以使標記更加簡潔。

在CSS1 中，通過這種方式來應用規則的選擇器被稱為上下文選擇器(contextual selectors)，

這是由於它們依賴於上下文關係來應用或者避免某項規則。

在CSS2 中，它們稱為派生選擇器，但是無論你如何稱呼它們，它們的作用都是相同的。

派生選擇器允許你根據文檔的上下文關係來確定某個標籤的樣式。

通過合理地使用派生選擇器，我們可以使HTML 代碼變得更加整潔。

比方說，你希望列表中的strong 元素變為斜體字，而不是通常的粗體字，可以這樣定義一個派生選擇器：

<code>li strong</code> {
    font-style: italic;
    font-weight: normal;
  }

請注意標記為<strong> 的藍色代碼的上下文關係：

<p><strong>我是粗體字，不是斜體字，因為我不在列表當中，所以這個規則對我不起作用</strong></p>
<ol>
<code><li><strong></code>我是斜體字。這是因為strong元素位於li元素內。<code></strong></li></code>
<li>我是正常的字體。</li>
</ol>

在上面的例子中，只有li 元素中的strong 元素的樣式為斜體字，

無需為strong 元素定義特別的class 或id，代碼更加簡潔。

再看看下面的CSS 規則：

strong {
     color: red;
     }
h2 {
     color: red;
     }
<code>h2 strong</code> {
     color: blue;
     }

下面是它施加影響的HTML：

<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h2>This subhead is also red.</h2>
<code><h2></code> The strongly emphasized word in this subhead is <code><strong></code> blue <code></strong></code> . <code></h2></code>