實例解析CSS選擇符及其用法
本文和大家重點討論一下CSS選擇符的用法，這里將所有的CSS選擇符都列舉出來了，并對每個CSS選擇符做單獨的解釋和舉例，相信本文介紹一定會讓你有所收獲。
CSS選擇符的用法和實例
本文主要講了CSS選擇符(CSSSelectors)用法和相關例子，雖然之前已經有不少對于CSS選擇符的文章在網絡上出現，不過我還是準備以自己的方式來寫一寫，這也是一種獲得樂趣的途徑。所以我小小的總結了一下css1及css2選擇符（本文的CSS選擇符都為css1及css2）的用法及實例，希望對大家有些許幫助。
現在已經將所有的CSS選擇符都列舉出來了，將就對每個CSS選擇符做單獨的解釋和舉例。對于以下的這些例子，有些只是簡單的應用實例，有些還提供了對比例子，使得可以明顯的看出該種選擇符的使用范圍和方法。
類型選擇符(TypeSelectors)
語法：E1
說明：有的時候我們也將它叫做CSS標簽選擇符，因為它是直接用html標記來做選擇符進行操作。目前所有主流瀏覽器均支持該選擇符，屬于CSS1選擇符。
實例：
- div{color:#F00;}
- <div>這里是測試內容</div>
包含選擇符(DescendantSelectors)
語法：E1E2
說明：選擇所有被E1包含的E2，這里的E1和E2即可以是html標記，也可以是class或id。目前所有主流瀏覽器均支持該CSS選擇符，屬于CSS1選擇符。
實例：
- divem{color:#F00;}
- .testem{color:#F00;}
- <div>這里是<em>測試</em>內容</div>
- <divclassdivclass="test">這里是<em>測試</em>內容</div>
ID選擇符(IDSelectors)
語法：#sID
說明：以DOM中作為對象的***標識符的ID作為選擇符。目前所有主流瀏覽器均支持該選擇符，屬于CSS1選擇符。
實例：
- #test{color:#F00;}
- <dividdivid="test">這里是測試內容</div>
類選擇符(ClassSelectors)
語法：.className
說明：其效果等同于E1[class~=className]。可以為對象的class屬性指定多于一個值(className)，其方法是用空格將每個className隔開。目前所有主流瀏覽器均支持該選擇符，屬于CSS1選擇符。
實例：
- .test{color:#F00;}
- .test2{font-size:14px;}
- <dividdivid="test">這里是測試內容</div>
- <dividdivid="testtest2">這里是測試內容</div>
#p#分組選擇符(GroupingSelectors)
語法：E1,E2,E3
說明：將同樣的定義應用于多個CSS選擇符，可以將選擇符以逗號分隔的方式并為組。目前所有主流瀏覽器均支持該選擇符，屬于CSS1選擇符。
實例：
- .test,p{color:#F00;}
- <dividdivid="test">這里是測試內容</div>
- <p>這里是測試內容</p>
通配選擇符(UniversalSelectors)
語法：*
說明：選定DOM中的所有對象。目前所有主流瀏覽器均支持該CSS選擇符，屬于CSS2選擇符。
實例：
- *{color:#F00;}
- <div>這里是測試內容</div>
- <p>這里是測試內容</p>
子選擇符(ChildSelectors)
語法：E1>E2
說明：選擇所有作為E1子對象的E2，不包括孫輩和更深的關系。非IE內核瀏覽器和IE7及以上瀏覽器支持，屬于CSS2選擇符。
實例：
- .test>strong{color:#F00;}
- <divclassdivclass="test">
- <strong>測試的內容</strong>
- <p>這是<strong>測試的內容</strong>哦！</p>
- <strong>測試的內容</strong>
- </div>
相鄰選擇符(AdjacentSelectors)
語法：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>
#p#屬性選擇符(AttributeSelectors)
語法：（CSS選擇符中的屬性選擇符具體再分為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;}
- <divtitledivtitle="測試的內容">測試的內容</div>
- div[class=a]{color:#f00;}
- <divclassdivclass="a">測試的內容</div>
- <divclassdivclass="ab">測試的內容</div>
- div[class~=a]{color:#f00;}
- <divclassdivclass="a">測試的內容</div>
- <divclassdivclass="ab">測試的內容</div>
- div[title|=a]{color:#f00;}
- <divtitledivtitle="a">測試的內容</div>
- <divtitledivtitle="abc">測試的內容</div>
- <divtitledivtitle="a-b-c">測試的內容</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對象，此偽類不發生作用。
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;}
- <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>前端開發<em>權威指南</em></div>
#p#偽對象選擇符(CSSPseudo-ElementsReference)
語法：（CSS選擇符中的偽對象選擇符共有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>
【編輯推薦】
