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

　　做這之前，當(dāng)然得將所有CSS選擇符列出來先。

CSS選擇符(CSS Selectors - CSS1 and CSS2)

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

類型選擇符(Type Selectors)

　　語(yǔ)法：E1

　　說明：有的時(shí)候我們也將它叫做標(biāo)簽選擇符，因?yàn)樗侵苯佑胔tml標(biāo)記來做選擇符進(jìn)行操作。目前所有主流瀏覽器均支持該選擇符，屬于CSS1選擇符。

　　實(shí)例：
　　div{color:#F00;}
　　<div>這里是測(cè)試內(nèi)容</div>

包含選擇符(Descendant Selectors)

　　語(yǔ)法：E1 E2

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

　　實(shí)例：
　　div em{color:#F00;}
　　.test em{color:#F00;}
　　<div>這里是<em>測(cè)試</em>內(nèi)容</div>
　　<div class="test">這里是<em>測(cè)試</em>內(nèi)容</div>

ID選擇符(ID Selectors)

　　語(yǔ)法：#sID

　　說明：以DOM中作為對(duì)象的唯一標(biāo)識(shí)符的ID作為選擇符。目前所有主流瀏覽器均支持該選擇符，屬于CSS1選擇符。

　　實(shí)例：
　　#test{color:#F00;}
　　<div id="test">這里是測(cè)試內(nèi)容</div>

類選擇符(Class Selectors)

　　語(yǔ)法：.className

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

　　實(shí)例：
　　.test{color:#F00;}
　　.test2{font-size:14px;}
　　<div id="test">這里是測(cè)試內(nèi)容</div>
　　<div id="test test2">這里是測(cè)試內(nèi)容</div>

分組選擇符(Grouping Selectors)

　　語(yǔ)法：E1,E2,E3

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

　　實(shí)例：
　　.test,p{color:#F00;}
　　<div id="test">這里是測(cè)試內(nèi)容</div>
　　<p>這里是測(cè)試內(nèi)容</p>

通配選擇符(Universal Selectors)

　　語(yǔ)法：*

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

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

子選擇符(Child Selectors)

　　語(yǔ)法：E1 > E2

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

　　實(shí)例：
　　.test > strong{color:#F00;}
　　<div class="test">
　　　<strong>測(cè)試的內(nèi)容</strong>
　　　<p>這是<strong>測(cè)試的內(nèi)容</strong>哦！</p>
　　　<strong>測(cè)試的內(nèi)容</strong>
　　</div>

相鄰選擇符(Adjacent Selectors)

　　語(yǔ)法：E1 + E2

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

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

屬性選擇符(Attribute Selectors)

　　語(yǔ)法：（屬性選擇符具體再分為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屬性且屬性值為一用空格分隔的字詞列表，其中一個(gè)等于value的E1。
　　4. 選擇具有attr屬性且屬性值為一用連字符分隔的字詞列表，由value開始的E1
　　非IE內(nèi)核瀏覽器和IE7及以上瀏覽器支持，屬于CSS2選擇符。

　　實(shí)例：
　　div[title]{color:#f00;}
　　<div title="測(cè)試的內(nèi)容">測(cè)試的內(nèi)容</div>

　　div[class=a]{color:#f00;}
　　<div class="a">測(cè)試的內(nèi)容</div>
　　<div class="a b">測(cè)試的內(nèi)容</div>

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

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

偽類選擇符(CSS Pseudo-Classes Reference)

　　語(yǔ)法：（偽類選擇符共有10種）
　　1. Selector:link{ sRules }
　　2. Selector:visited{ sRules }
　　3. Selector:hover{ sRules }
　　4. Selector:active{ sRules }
　　5. Selector:focus{ sRules }
　　6. Selector1 Selector2:first-child{ sRules }
　　7. Selector:first{ sRules }
　　8. Selector:left{ sRules }
　　9. Selector:right{ sRules }
　　10.Selector:lang{ sRules }

　　說明：
　　1. 設(shè)置a對(duì)象在未被訪問前的樣式表屬性。默認(rèn)值由瀏覽器決定。對(duì)于無href屬性（特性）的a對(duì)象，此偽類不發(fā)生作用。
　　2. 設(shè)置a對(duì)象在其鏈接地址已被訪問過時(shí)的樣式表屬性。默認(rèn)值由瀏覽器決定。定義網(wǎng)頁(yè)過期時(shí)間或用戶清空歷史記錄將影響此偽類的作用。對(duì)于無href屬性（特性）的a對(duì)象，此偽類不發(fā)生作用。
　　3. 設(shè)置對(duì)象在其鼠標(biāo)懸停時(shí)的樣式表屬性。在CSS1中此偽類僅可用于a對(duì)象。且對(duì)于無href屬性（特性）的a對(duì)象，此偽類不發(fā)生作用。在CSS2中此偽類可以應(yīng)用于任何對(duì)象。
　　4. 設(shè)置對(duì)象在被用戶激活（在鼠標(biāo)點(diǎn)擊與釋放之間發(fā)生的事件）時(shí)的樣式表屬性。在CSS1中此偽類僅可用于a對(duì)象。且對(duì)于無href屬性（特性）的a對(duì)象，此偽類不發(fā)生作用。在CSS2中此偽類可以應(yīng)用于任何對(duì)象。并且:active狀態(tài)可以和:link以及:visited狀態(tài)同時(shí)發(fā)生。
　　5. 設(shè)置對(duì)象在成為輸入焦點(diǎn)（該對(duì)象的onfocus事件發(fā)生）時(shí)的樣式表屬性。
　　6. 設(shè)置對(duì)象（Selector1）的第一個(gè)子對(duì)象（Selector2）的樣式表屬性。
　　7. 設(shè)置頁(yè)面容器第一頁(yè)使用的樣式表屬性。僅用于@page規(guī)則。
　　8. 設(shè)置頁(yè)面容器位于裝訂線左邊的所有頁(yè)面使用的樣式表屬性。僅用于@page規(guī)則。
　　9. 設(shè)置頁(yè)面容器位于裝訂線右邊的所有頁(yè)面使用的樣式表屬性。僅用于@page規(guī)則。
　　10.設(shè)置對(duì)象使用特殊語(yǔ)言的內(nèi)容樣式表屬性。
　　
　　:link, :visited, :hover, :active屬于CSS1，目前所有主流瀏覽器均支持a對(duì)象的該4種偽類選擇符，非IE瀏覽器和IE7及以上瀏覽器還支持非a對(duì)象的:hover, :active；:focus, :lang屬于CSS2，非IE核心瀏覽器及IE8支持。

　　實(shí)例：
　　a:link{color:#f00;}
　　a:visited{color:#666;}
　　a:hover{color:#F60;text-decoration:none;}
　　a:active{color:#000;}
　　<a href="http://blog.doyoe.com/">css探索之旅</a>

　　input:focus,a:focus{background:#f00;/* 點(diǎn)擊或按TAB鍵獲得焦點(diǎn)時(shí)生效 */}
　　<a href="http://blog.doyoe.com/">css探索之旅</a>
　　<input type="text" />

　　div em:first-child{color:#f00;}
　　<div><em>web</em>前端開發(fā)<em>權(quán)威指南</em></div>

偽對(duì)象選擇符(CSS Pseudo-Elements Reference)

　　語(yǔ)法：（偽對(duì)象選擇符共有4種）
　　1. Selector:first-letter
　　2. Selector:first-line
　　3. Selector:before
　　4. Selector:after

　　說明：
　　1. 設(shè)置對(duì)象內(nèi)的第一個(gè)字符的樣式表屬性。此偽對(duì)象僅作用于塊元素。內(nèi)聯(lián)元素要使用該偽對(duì)象，必須先設(shè)定對(duì)象具有塊元素的表狀。
　　2. 設(shè)置對(duì)象內(nèi)的第一行的樣式表屬性。此偽對(duì)象僅作用于塊對(duì)象。內(nèi)聯(lián)對(duì)象要使用該偽對(duì)象，必須先設(shè)定對(duì)象具有塊元素的表狀。
　　3. 用來和content屬性一起使用，設(shè)置在對(duì)象前（依據(jù)對(duì)象樹的邏輯結(jié)構(gòu)）發(fā)生的內(nèi)容。
　　4. 用來和content屬性一起使用，設(shè)置在對(duì)象后（依據(jù)對(duì)象樹的邏輯結(jié)構(gòu)）發(fā)生的內(nèi)容。

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

　　實(shí)例：
　　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>
 

　　待修改完善。。。

最新評(píng)論