本文向大家描述一下CSS派生選擇器的概念和使用，通過(guò)依據(jù)元素在其位置的上下文關(guān)系來(lái)定義樣式，你可以使標(biāo)記更加簡(jiǎn)潔，在CSS1中，通過(guò)這種方式來(lái)應(yīng)用規(guī)則的選擇器被稱(chēng)為上下文選擇器，而在CSS2中，它們稱(chēng)為CSS派生選擇器。

CSS派生選擇器

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

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

CSS派生選擇器允許你根據(jù)文檔的上下文關(guān)系來(lái)確定某個(gè)標(biāo)簽的樣式。通過(guò)合理地使用CSS派生選擇器，我們可以使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> 
 

文章出處：標(biāo)準(zhǔn)之路(http://www.aa25.cn/css2/derive562.shtml)

【編輯推薦】

1. CSS屬性選擇器語(yǔ)法詳解
2. CSS類(lèi)選擇器用法簡(jiǎn)明介紹
3. 三種方法實(shí)現(xiàn)CSS樣式表插入
4. CSS外邊距設(shè)置屬性margin用法
5. 探究CSS高級(jí)語(yǔ)法中選擇器分組和CSS繼承用法