本文向大家描述一下CSS派生選擇器的使用，CSS派生選擇器允許你根據(jù)文檔的上下文關(guān)系來(lái)確定某個(gè)標(biāo)簽的樣式。通過(guò)合理地使用派生選擇器，我們可以使HTML代碼變得更加整潔。

CSS派生選擇器

通過(guò)依據(jù)元素在其位置的上下文關(guān)系來(lái)定義樣式，你可以使標(biāo)記更加簡(jiǎn)潔。

在CSS1中，通過(guò)這種方式來(lái)應(yīng)用規(guī)則的選擇器被稱為上下文選擇器(contextualselectors)，這是由于它們依賴于上下文關(guān)系來(lái)應(yīng)用或者避免某項(xiàng)規(guī)則。在CSS2中，它們稱為CSS派生選擇器，但是無(wú)論你如何稱呼它們，它們的作用都是相同的。

CSS派生選擇器允許你根據(jù)文檔的上下文關(guān)系來(lái)確定某個(gè)標(biāo)簽的樣式。通過(guò)合理地使用派生選擇器，我們可以使HTML代碼變得更加整潔。

比方說(shuō)，你希望列表中的strong元素變?yōu)樾斌w字，而不是通常的粗體字，可以這樣定義一個(gè)CSS派生選擇器：

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

請(qǐng)注意標(biāo)記為<strong>的藍(lán)色代碼的上下文關(guān)系：

<p><strong>我是粗體字，不是斜體字，因?yàn)槲也辉诹斜懋?dāng)中，
所以這個(gè)規(guī)則對(duì)我不起作用</strong></p> 
 
<ol> 
<li><strong>我是斜體字。這是因?yàn)閟trong元素位于li元素內(nèi)。</strong></li> 
<li>我是正常的字體。</li> 
</ol> 
 

在上面的例子中，只有l(wèi)i元素中的strong元素的樣式為斜體字，無(wú)需為strong元素定義特別的class或id，代碼更加簡(jiǎn)潔。

再看看下面的CSS派生選擇器的規(guī)則：

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. 輕松實(shí)現(xiàn)CSS樣式實(shí)時(shí)切換技巧
2. CSS中display:inline-block屬性妙用
3. CSS2.0中最常用的十八般兵器
4. CSS控制input樣式和懸停交互
5. 解讀CSS中position屬性四大可選值用法