本文和大家重點討論一下CSS選擇符的用法，這里將所有的CSS選擇符都列舉出來了，并對每個CSS選擇符做單獨的解釋和舉例，相信本文介紹一定會讓你有所收獲。

CSS選擇符的用法和實例

本文主要講了CSS選擇符(CSSSelectors)用法和相關(guān)例子，雖然之前已經(jīng)有不少對于CSS選擇符的文章在網(wǎng)絡上出現(xiàn)，不過我還是準備以自己的方式來寫一寫，這也是一種獲得樂趣的途徑。所以我小小的總結(jié)了一下css1及css2選擇符（本文的CSS選擇符都為css1及css2）的用法及實例，希望對大家有些許幫助。

現(xiàn)在已經(jīng)將所有的CSS選擇符都列舉出來了，將就對每個CSS選擇符做單獨的解釋和舉例。對于以下的這些例子，有些只是簡單的應用實例，有些還提供了對比例子，使得可以明顯的看出該種選擇符的使用范圍和方法。

類型選擇符(TypeSelectors)

　　語法：E1

　　說明：有的時候我們也將它叫做CSS標簽選擇符，因為它是直接用html標記來做選擇符進行操作。目前所有主流瀏覽器均支持該選擇符，屬于CSS1選擇符。

　　實例： 

　　div{color:#F00;}  
　　<div>這里是測試內(nèi)容</div> 
 

包含選擇符(DescendantSelectors)

　　語法：E1E2

　　說明：選擇所有被E1包含的E2，這里的E1和E2即可以是html標記，也可以是class或id。目前所有主流瀏覽器均支持該CSS選擇符，屬于CSS1選擇符。

　　實例： 

　　divem{color:#F00;}  
　　.testem{color:#F00;}  
　　<div>這里是<em>測試</em>內(nèi)容</div> 
　　<divclassdivclass="test">這里是<em>測試</em>內(nèi)容</div> 
 

ID選擇符(IDSelectors)

　　語法：#sID

　　說明：以DOM中作為對象的***標識符的ID作為選擇符。目前所有主流瀏覽器均支持該選擇符，屬于CSS1選擇符。

　　實例： 

　　#test{color:#F00;}  
　　<dividdivid="test">這里是測試內(nèi)容</div> 
 

類選擇符(ClassSelectors)

　　語法：.className

　　說明：其效果等同于E1[class~=className]。可以為對象的class屬性指定多于一個值(className)，其方法是用空格將每個className隔開。目前所有主流瀏覽器均支持該選擇符，屬于CSS1選擇符。

　　實例：

　　.test{color:#F00;}  
　　.test2{font-size:14px;}  
　　<dividdivid="test">這里是測試內(nèi)容</div> 
　　<dividdivid="testtest2">這里是測試內(nèi)容</div> 
 

#p#分組選擇符(GroupingSelectors)

　　語法：E1,E2,E3

　　說明：將同樣的定義應用于多個CSS選擇符，可以將選擇符以逗號分隔的方式并為組。目前所有主流瀏覽器均支持該選擇符，屬于CSS1選擇符。

　　實例： 

　　.test,p{color:#F00;}  
　　<dividdivid="test">這里是測試內(nèi)容</div> 
　　<p>這里是測試內(nèi)容</p> 
 

通配選擇符(UniversalSelectors)

　　語法：*

　　說明：選定DOM中的所有對象。目前所有主流瀏覽器均支持該CSS選擇符，屬于CSS2選擇符。

　　實例：

　　*{color:#F00;}  
　　<div>這里是測試內(nèi)容</div> 
　　<p>這里是測試內(nèi)容</p> 
 

子選擇符(ChildSelectors)

　　語法：E1>E2

　　說明：選擇所有作為E1子對象的E2，不包括孫輩和更深的關(guān)系。非IE內(nèi)核瀏覽器和IE7及以上瀏覽器支持，屬于CSS2選擇符。

　　實例：

　　.test>strong{color:#F00;}  
　　<divclassdivclass="test"> 
　　　<strong>測試的內(nèi)容</strong> 
　　　<p>這是<strong>測試的內(nèi)容</strong>哦！</p> 
　　　<strong>測試的內(nèi)容</strong> 
　　</div> 

相鄰選擇符(AdjacentSelectors)

　　語法：E1+E2

　　說明：選擇緊跟在對象E1之后的所有E2對象(E1與E2需結(jié)構(gòu)級別相同)。非IE內(nèi)核瀏覽器和IE7及以上瀏覽器支持，屬于CSS2選擇符。

　　實例：

　　p+p{color:#F00;}  
　　<p>測試的內(nèi)容1</p> 
　　<p>測試的內(nèi)容2</p> 
　　<div>測試的內(nèi)容3</div> 
　　<p>測試的內(nèi)容4</p> 
　　<p>測試的內(nèi)容5</p> 
　　<div><p>測試的內(nèi)容6</p></div> 
 

#p#屬性選擇符(AttributeSelectors)

　　語法：（CSS選擇符中的屬性選擇符具體再分為4種不同的表現(xiàn)方式）

　　1.E1[attr]
　　2.E1[attr=value]
　　3.E1[attr~=value]
　　4.E1[attr|=value]

　　說明：

　　1.選擇具有attr屬性的E1

　　2.選擇具有attr屬性且屬性值等于value的E1

    　3.選擇具有attr屬性且屬性值為一用空格分隔的字詞列表，其中一個等于value的E1。

　　4.選擇具有attr屬性且屬性值為一用連字符分隔的字詞列表，由value開始的E1

　　非IE內(nèi)核瀏覽器和IE7及以上瀏覽器支持，屬于CSS2選擇符。

　　實例：

　　div[title]{color:#f00;}  
　　<divtitledivtitle="測試的內(nèi)容">測試的內(nèi)容</div> 
 
　　div[class=a]{color:#f00;}  
　　<divclassdivclass="a">測試的內(nèi)容</div> 
　　<divclassdivclass="ab">測試的內(nèi)容</div> 
 
　　div[class~=a]{color:#f00;}  
　　<divclassdivclass="a">測試的內(nèi)容</div> 
　　<divclassdivclass="ab">測試的內(nèi)容</div> 
 
　　div[title|=a]{color:#f00;}  
　　<divtitledivtitle="a">測試的內(nèi)容</div> 
　　<divtitledivtitle="abc">測試的內(nèi)容</div> 
　　<divtitledivtitle="a-b-c">測試的內(nèi)容</div> 
 

 偽類選擇符(CSSPseudo-ClassesReference)

　　語法：（CSS選擇符中的偽類選擇符共有10種）

　　1.Selector:link{sRules}
　　2.Selector:visited{sRules}
　　3.Selector:hover{sRules}
　　4.Selector:active{sRules}
　　5.Selector:focus{sRules}
　　6.Selector1Selector2:first-child{sRules}
　　7.Selector:first{sRules}
　　8.Selector:left{sRules}
　　9.Selector:right{sRules}
　　10.Selector:lang{sRules}

　　說明：

　　1.設置a對象在未被訪問前的樣式表屬性。默認值由瀏覽器決定。對于無href屬性（特性）的a對象，此偽類不發(fā)生作用。

　　2.設置a對象在其鏈接地址已被訪問過時的樣式表屬性。默認值由瀏覽器決定。定義網(wǎng)頁過期時間或用戶清空歷史記錄將影響此偽類的作用。對于無href屬性（特性）的a對象，此偽類不發(fā)生作用。

　　3.設置對象在其鼠標懸停時的樣式表屬性。在CSS1中此偽類僅可用于a對象。且對于無href屬性（特性）的a對象，此偽類不發(fā)生作用。在CSS2中此偽類可以應用于任何對象。

　　4.設置對象在被用戶激活（在鼠標點擊與釋放之間發(fā)生的事件）時的樣式表屬性。在CSS1中此偽類僅可用于a對象。且對于無href屬性（特性）的a對象，此偽類不發(fā)生作用。在CSS2中此偽類可以應用于任何對象。并且:active狀態(tài)可以和:link以及:visited狀態(tài)同時發(fā)生。

　　5.設置對象在成為輸入焦點（該對象的onfocus事件發(fā)生）時的樣式表屬性。

　　6.設置對象（Selector1）的***個子對象（Selector2）的樣式表屬性。

　　7.設置頁面容器***頁使用的樣式表屬性。僅用于@page規(guī)則。

　　8.設置頁面容器位于裝訂線左邊的所有頁面使用的樣式表屬性。僅用于@page規(guī)則。

　　9.設置頁面容器位于裝訂線右邊的所有頁面使用的樣式表屬性。僅用于@page規(guī)則。

　　10.設置對象使用特殊語言的內(nèi)容樣式表屬性。
　　
　　:link,:visited,:hover,:active屬于CSS1，目前所有主流瀏覽器均支持a對象的該4種偽類選擇符，非IE瀏覽器和IE7及以上瀏覽器還支持非a對象的:hover,:active；:focus,:lang屬于CSS2，非IE核心瀏覽器及IE8支持。

　　實例：

　　a:link{color:#f00;}  
　　a:visited{color:#666;}  
　　a:hover{color:#F60;text-decoration:none;}  
　　a:active{color:#000;}  
　　<ahrefahref="http://blog.doyoe.com/">css探索之旅</a> 
 
　　input:focus,a:focus{background:#f00;
/*點擊或按TAB鍵獲得焦點時生效*/}  
　　<ahrefahref="http://blog.doyoe.com/">css探索之旅</a> 
　　<inputtypeinputtype="text"/> 
 
　　divem:first-child{color:#f00;}  
　　<div><em>web</em>前端開發(fā)<em>權(quán)威指南</em></div> 
 

#p#偽對象選擇符(CSSPseudo-ElementsReference)

　　語法：（CSS選擇符中的偽對象選擇符共有4種）

　　1.Selector:first-letter
　　2.Selector:first-line
　　3.Selector:before
　　4.Selector:after

　　說明：

　　1.設置對象內(nèi)的***個字符的樣式表屬性。此偽對象僅作用于塊元素。內(nèi)聯(lián)元素要使用該偽對象，必須先設定對象具有塊元素的表狀。

　　2.設置對象內(nèi)的***行的樣式表屬性。此偽對象僅作用于塊對象。內(nèi)聯(lián)對象要使用該偽對象，必須先設定對象具有塊元素的表狀。

　　3.用來和content屬性一起使用，設置在對象前（依據(jù)對象樹的邏輯結(jié)構(gòu)）發(fā)生的內(nèi)容。

　　4.用來和content屬性一起使用，設置在對象后（依據(jù)對象樹的邏輯結(jié)構(gòu)）發(fā)生的內(nèi)容。

　　這幾個偽對象選擇符都為屬于CSS2選擇符，其中:first-letter和:first-line目前所有主流瀏覽器均支持；:before和:after非IE核心瀏覽器及IE8支持。

　　實例：

　　div:first-letter{color:#f00;}  
　　<div>我是一只丑小鴨，伊啊伊啊喲</div> 
 
　　div:first-line{color:#f00;}  
　　<div>我是一只丑小鴨，伊啊伊啊喲</div> 
 
　　div:before{content:"web";}  
　　<div>前端開發(fā)</div> 
 
　　div:after{content:"...";}  
　　<div>大段的文字</div> 

【編輯推薦】

1. CSS繼承性及其應用
2. CSS中at(@)指示符用法詳解
3. CSS中l(wèi)ink和@import的區(qū)別
4. CSS2.0中page-break-after屬性用法
5. 技術(shù)分享 使用不同CSS樣式兼容多種瀏覽器