你對CSS選擇符的用法是否了解，這里和大家分享一下六大CSS選擇符的用法，比如所群組選擇符，對于XHMTL對象，可以對一組同時進行了相同的樣式指派。使用逗號對選擇符進行了分隔，這樣書寫的優點在于同樣的樣式只需要書寫一次即可，減少代碼量，改善CSS代碼結構。

CSS選擇符詳解

一、類型選擇符

什么是CSS選擇符中類型選擇符？指以網頁中已有的標簽類型作為名稱的行徑符。body是網頁中的一個標簽類型，div,p,span都是。
如下：

ExampleSourceCode

body{}  
div{}  
p{}  
span{}  
 

二、群組選擇符

對于XHMTL對象，可以對一組同時進行了相同的樣式指派。使用逗號對選擇符進行了分隔，這樣書寫的優點在于同樣的樣式只需要書寫一次即可，減少代碼量，改善CSS代碼結構。
使用時應該注意“逗號”是在半角模式下，并非中文全角模式。

如下：

ExampleSourceCode

h1,h2,h6,p,span  
{  
font-size:12px;  
color:#FF0000;  
font-family:arial;  
}  
 

三、包含選擇符

CSS選擇符中的包含選擇符對某對象中的子對象進行樣式指點定，這樣選擇方式就發揮了作用。需要注意的是，僅對此對象的子對象標簽有效，對于其它單獨存在或位于此對象以外的子對象，不應用此樣式設置。
這樣做的優點在于，幫我們避免過多的id、class設置，直接對所需的元素進行定義。

如下：

ExampleSourceCode 

h2span  
{  
color:red;  
}  
如下：  
bodyh1spanstrong  
{  
font-weight:bold;  
}  

四、id選擇符

根據DOM文檔對象模型原理所出現的選擇符，對于一個XHTML文件，其中的每一個標簽都可以使用一個id=""的形式進行一個名稱指派，但需要注意，在一個XHTML文件中id是具有***性而不可以重復的。

在DIV CSS布局的網頁中，可以針對不同的用途進行命名，如頭部為header、底部為footer。

XHTML如下：

ExampleSourceCode 

<dividdivid="content"></div> 
 

CSS如下：
ExampleSourceCode 

#content  
{  
font-size:14px;  
line-height:120%;  
}  

 #p#五、class選擇符

其實id是對于XHTML標簽的擴展，而CSS選擇符中class選擇符是對SHTML多個標簽的一種組合，class直譯的意思是類或類別。對于XHTML標簽使用class=""進行名稱指派。與id不同，class可以重復使用，對于多個樣式相同的元素，可以直接定義為一個class。

使用class的優點已不言自明，它對CSS代碼重用性有良好的體現，眾多的標簽均可以使用一個樣式來定義而不需要每一個編寫一個樣式代碼。

XHTML如下：

ExampleSourceCode

<pclasspclass="he"></p> 
<spanclassspanclass="he"></span> 
<h5classh5class="he"></h5> 
 

 CSS如下：

ExampleSourceCode

.he  
{  
margin:10px;  
background-color:red;  
}  
 

 六、標簽指定式的選擇符

如果想同時使用id和class，也想同時使用CSS選擇符中的標簽選擇符，可以使用如下的方式：

ExampleSourceCode

h1#content{}  
/*表示所有id為content的h1標簽*/  
h1.p1{}  
/*表示所有class為p1的h1標簽*  
/標簽指定式選擇符的精度介于標簽選擇符及id/class選擇符之間，  
是常用的選擇符之一。  
 

 七、組合選擇符

對于上面的所有選擇符而言，進行組合使用。如下：

ExampleSourceCode

h1.p1{}  
/*表示h1下的所有class為p1的標簽*/  
#contenth1{}  
表示id為content的標簽下的所有h1標簽  
h1.p1,#contenth1{}  
/*表示h1下的所有class為p1的標簽以及id為content的標簽下的所有h1標簽*/  
h1#contenth2{}  
/*id為content的h1標簽下的h2標簽*/  
 

 CSS選擇符是非常自由與靈活的，可以根據頁面的需要，使用各種選擇符，盡量結構化與優化CSS文件。

原文地址：http://www.52css.com/article.asp?id=75轉載請注明出處！

【編輯推薦】

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