雖然之前已經有不少對于CSS選擇符的文章在網絡上出現，不過我還是準備以自己的方式來寫一寫，這也是一種獲得樂趣的途徑。所以我小小的總結了一下css1及css2選擇符（本文的CSS選擇符都為css1及css2）的用法及實例，希望對大家有些許幫助。

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

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

類型選擇符(Type Selectors)　CSS1
包含選擇符(Descendant Selectors)　CSS1
ID選擇符(ID Selectors)　CSS1
類選擇符(Class Selectors)　CSS1
分組選擇符(Grouping Selectors)　CSS1
通配選擇符(Universal Selectors)　CSS2
子選擇符(Child Selectors)　CSS2
相鄰選擇符(Adjacent Selectors)　CSS2
屬性選擇符(Attribute Selectors)

E1[attr]　CSS2
E1[attr=value]　CSS2
E1[attr~=value]　CSS2
E1[attr|=value]　CSS2

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

:link　CSS1
:visited　CSS1
:hover　CSS1
:active　CSS1
:focus　CSS2
:first-child　CSS2
:first　CSS2
:left　CSS2
:right　CSS2
:lang　CSS2

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

:first-letter　CSS2
:first-line　CSS2
:before　CSS2
:after　CSS2

 　　現在已經將所有的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選擇符。