網頁制作poluoluo文章簡介：雖然之前已經有不少對於CSS選擇符的文章在網絡上出現，不過我還是准備以自己的方式來寫一寫，這也是一種獲得樂趣的途徑。所以我小小的總結了一下css1及css2選擇符（本文的CSS選擇符都為css1及css2）的用法及實例，希望對大家有些許幫助。
成天都要與樣式打交道的朋友，相信對CSS選擇符(CSS Selectors)都不會陌生。不過對於剛接觸或者還不是很熟悉css的朋友來說，能夠找到一份對於CSS選擇符的相關例子集合，還是會有一定幫助的。
雖然之前已經有不少對於CSS選擇符的文章在網絡上出現，不過我還是准備以自己的方式來寫一寫，這也是一種獲得樂趣的途徑。所以我小小的總結了一下css1及css2選擇符（本文的CSS選擇符都為css1及css2）的用法及實例，希望對大家有些許幫助。
做這之前，當然得將所有CSS選擇符列出來先。
現在已經將所有的CSS選擇符都列舉出來了，將就對每個選擇符做單獨的解釋和舉例。對於以下的這些例子，有些只是簡單的應用實例，有些還提供了對比例子，使得可以明顯的看出該種選擇符的使用范圍和方法。
類型選擇符(Type Selectors)
語法：E1
說明：有的時候我們也將它叫做標簽選擇符，因為它是直接用html標記來做選擇符進行操作。目前所有主流浏覽器均支持該選擇符，屬於CSS1選擇符。
實例：
div{color:#F00;}
<div>這裡是測試內容</div>
包含選擇符(Descendant Selectors)
語法：E1 E2
說明：選擇所有被E1包含的E2，這裡的E1和E2即可以是html標記，也可以是class或id。目前所有主流浏覽器均支持該選擇符，屬於CSS1選擇符。
實例：
div em{color:#F00;}
.test em{color:#F00;}
<div>這裡是<em>測試</em>內容</div>
<div class="test">這裡是<em>測試</em>內容</div>
ID選擇符(ID Selectors)
語法：#sID
說明：以DOM中作為對象的唯一標識符的ID作為選擇符。目前所有主流浏覽器均支持該選擇符，屬於CSS1選擇符。
實例：
#test{color:#F00;}
<div id="test">這裡是測試內容</div>
類選擇符(Class Selectors)
語法：.className
說明：其效果等同於E1[class~=className]。可以為對象的class屬性指定多於一個值(className)，其方法是用空格將每個className隔開。目前所有主流浏覽器均支持該選擇符，屬於CSS1選擇符。
實例：
.test{color:#F00;}
.test2{font-size:14px;}
<div id="test">這裡是測試內容</div>
<div id="test test2">這裡是測試內容</div>
分組選擇符(Grouping Selectors)
語法：E1,E2,E3
說明：將同樣的定義應用於多個選擇符，可以將選擇符以逗號分隔的方式並為組。目前所有主流浏覽器均支持該選擇符，屬於CSS1選擇符。
實例：
.test,p{color:#F00;}
<div id="test">這裡是測試內容</div>
<p>這裡是測試內容</p>
通配選擇符(Universal Selectors)
語法：*
說明：選定DOM中的所有對象。目前所有主流浏覽器均支持該選擇符，屬於CSS2選擇符。
實例：
*{color:#F00;}
<div>這裡是測試內容</div>
<p>這裡是測試內容</p>
子選擇符(Child Selectors)
語法：E1 > E2
說明：選擇所有作為E1子對象的E2，不包括孫輩和更深的關系。非IE內核浏覽器和IE7及以上浏覽器支持，屬於CSS2選擇符。
實例：
.test > strong{color:#F00;}
<div class="test">
<strong>測試的內容</strong>
<p>這是<strong>測試的內容</strong>哦！</p>
<strong>測試的內容</strong>
</div>
相鄰選擇符(Adjacent Selectors)
語法：E1 + E2
說明：選擇緊跟在對象E1之後的所有E2對象(E1與E2需結構級別相同)。非IE內核浏覽器和IE7及以上浏覽器支持，屬於CSS2選擇符。
實例：
p + p{color:#F00;}
<p>測試的內容1</p>
<p>測試的內容2</p>
<div>測試的內容3</div>
<p>測試的內容4</p>
<p>測試的內容5</p>
<div><p>測試的內容6</p></div>
屬性選擇符(Attribute Selectors)
語法：（屬性選擇符具體再分為4種不同的表現方式）
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內核浏覽器和IE7及以上浏覽器支持，屬於CSS2選擇符。
實例：
div[title]{color:#f00;}
<div title="測試的內容">測試的內容</div>
div[class=a]{color:#f00;}
<div class="a">測試的內容</div>
<div class="a b">測試的內容</div>
div[class~=a]{color:#f00;}
<div class="a">測試的內容</div>
<div class="a b">測試的內容</div>
div[title|=a]{color:#f00;}
<div title="a">測試的內容</div>
<div title="a b c">測試的內容</div>
<div title="a-b-c">測試的內容</div>
偽類選擇符(CSS Pseudo-Classes Reference)
語法：（偽類選擇符共有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. 設置a對象在未被訪問前的樣式表屬性。默認值由浏覽器決定。對於無href屬性（特性）的a對象，此偽類不發生作用。
2. 設置a對象在其鏈接地址已被訪問過時的樣式表屬性。默認值由浏覽器決定。定義網頁過期時間或用戶清空歷史記錄將影響此偽類的作用。對於無href屬性（特性）的a對象，此偽類不發生作用。
3. 設置對象在其鼠標懸停時的樣式表屬性。在CSS1中此偽類僅可用於a對象。且對於無href屬性（特性）的a對象，此偽類不發生作用。在CSS2中此偽類可以應用於任何對象。
4. 設置對象在被用戶激活（在鼠標點擊與釋放之間發生的事件）時的樣式表屬性。在CSS1中此偽類僅可用於a對象。且對於無href屬性（特性）的a對象，此偽類不發生作用。在CSS2中此偽類可以應用於任何對象。並且:active狀態可以和:link以及:visited狀態同時發生。
5. 設置對象在成為輸入焦點（該對象的onfocus事件發生）時的樣式表屬性。
6. 設置對象（Selector1）的第一個子對象（Selector2）的樣式表屬性。
7. 設置頁面容器第一頁使用的樣式表屬性。僅用於@page規則。
8. 設置頁面容器位於裝訂線左邊的所有頁面使用的樣式表屬性。僅用於@page規則。
9. 設置頁面容器位於裝訂線右邊的所有頁面使用的樣式表屬性。僅用於@page規則。
10.設置對象使用特殊語言的內容樣式表屬性。
: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;}
<a href="http://blog.doyoe.com/">css探索之旅</a>
input:focus,a:focus{background:#f00;/* 點擊或按TAB鍵獲得焦點時生效 */}
<a href="http://blog.doyoe.com/">css探索之旅</a>
<input type="text" />
div em:first-child{color:#f00;}
<div><em>web</em>前端開發<em>權威指南</em></div>
偽對象選擇符(CSS Pseudo-Elements Reference)
語法：（偽對象選擇符共有4種）
1. Selector:first-letter
2. Selector:first-line
3. Selector:before
4. Selector:after
說明：
1. 設置對象內的第一個字符的樣式表屬性。此偽對象僅作用於塊元素。內聯元素要使用該偽對象，必須先設定對象具有塊元素的表狀。
2. 設置對象內的第一行的樣式表屬性。此偽對象僅作用於塊對象。內聯對象要使用該偽對象，必須先設定對象具有塊元素的表狀。
3. 用來和content屬性一起使用，設置在對象前（依據對象樹的邏輯結構）發生的內容。
4. 用來和content屬性一起使用，設置在對象後（依據對象樹的邏輯結構）發生的內容。
這幾個偽對象選擇符都為屬於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>前端開發</div>
div:after {content:"...";}
<div>大段的文字</div>
待修改完善。。。