本文向大家描述一下CSS派生選擇器的概念和使用，通過依據元素在其位置的上下文關系來定義樣式，你可以使標記更加簡潔，在CSS1中，通過這種方式來應用規則的選擇器被稱為上下文選擇器，而在CSS2中，它們稱為CSS派生選擇器。

CSS派生選擇器

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

在CSS1中，通過這種方式來應用規則的選擇器被稱為上下文選擇器(contextualselectors)，這是由于他們依賴于上下文關系來應用或者避免某項規則。在CSS2中，它們稱為CSS派生選擇器，但是無論你如何稱呼它們，它們的作用都是相同的。

CSS派生選擇器允許你根據文檔的上下文關系來確定某個標簽的樣式。通過合理地使用CSS派生選擇器，我們可以使HTML代碼變得更加整潔。

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

listrong{  
 font-style:italic;  
 font-weight:normal;  
}  
 

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

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

在上面的例子中，只有li元素中的strong元素的樣式為斜體字，無需為strong元素定義特別的class或id，代碼更加簡潔。

◆再看看下面的CSS規則：

strong{  
 color:red;  
}  
h2{  
 color:red;  
}  
h2strong{  
 color:blue;  
}  
 

下面是它施加影響的HTML：

<p>Thestronglyemphasizedwordinthisparagraphis<strong>red</strong>.</p> 
<h2>Thissubheadisalsored.</h2> 
<h2>Thestronglyemphasizedwordinthissubheadis<strong>blue</strong> 
 

文章出處：標準之路(http://www.aa25.cn/css2/derive562.shtml)

【編輯推薦】

1. CSS屬性選擇器語法詳解
2. CSS類選擇器用法簡明介紹
3. 三種方法實現CSS樣式表插入
4. CSS外邊距設置屬性margin用法
5. 探究CSS高級語法中選擇器分組和CSS繼承用法