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

CSS派生選擇器

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

在CSS1中，通過這種方式來應用規則的選擇器被稱為上下文選擇器(contextualselectors)，這是由于它們依賴于上下文關系來應用或者避免某項規則。在CSS2中，它們稱為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>.</h2> 
 

【編輯推薦】

1. 輕松實現CSS樣式實時切換技巧
2. CSS中display:inline-block屬性妙用
3. CSS2.0中最常用的十八般兵器
4. CSS控制input樣式和懸停交互
5. 解讀CSS中position屬性四大可選值用法