30個最常用css選擇器解析.doc

30個最常用css選擇器解析作者：iiduce文章來源：點擊數(shù)：835更新時間：2011-7-31 你也許已經掌握了id、class、后臺選擇器這些基本的css選擇器。但這遠遠不是css的全部。下面向大家系統(tǒng)的解析css中30個最常用的選擇器，包括我們最頭痛的瀏覽器兼容性問題。掌握了它們，才能真正領略css的巨大靈活性。1. 以下是代碼片段：* margin:0; padding:0; 星狀選擇符會在頁面上的每一個元素上起作用。web設計者經常用它將頁面中所有元素的margin和padding設置為0。 *選擇符也可以在子選擇器中使用。以下是代碼片段：#container* border:1pxsolidblack; 上面的代碼中會應用于id為container元素的所有子元素中。 除非必要，我不建議在頁面中過的的使用星狀選擇符，因為他的作用域太大，相當耗瀏覽器資源。 兼容瀏覽器：IE6+、Firefox、Chrome、Safari、Opera2. #X以下是代碼片段：#container width:960px; margin:auto; 井號作用域有相應id的元素。id是我們最常用的css選擇器之一。id選擇器的優(yōu)勢是精準，高優(yōu)先級（優(yōu)先級基數(shù)為100，遠高于class的10），作為javascript腳本鉤子的不二選擇，同樣缺點也很明顯優(yōu)先級過高，重用性差，所以在使用id選擇器前，我們最好問下自己，真的到了非用id選擇器的地步？兼容瀏覽器：IE6+、Firefox、Chrome、Safari、Opera3. .X以下是代碼片段：.error color:red; 這是一個class(類)選擇器。class選擇器與id選擇器的不同是class選擇器能作用于期望樣式化的一組元素。 兼容瀏覽器：IE6+、Firefox、Chrome、Safari、Opera4. X Y以下是代碼片段：lia text-decoration:none; 這也是我們最常用的一種選擇器后代選擇器。用于選取X元素下子元素Y，要留意的點是，這種方式的選擇器將選取其下所有匹配的子元素，無視層級，所以有的情況是不宜使用的，比如上述的代碼去掉li下的所有a的下劃線，但li里面還有個ul，我不希望ul下的li的a去掉下劃線。使用此后代選擇器的時候要考慮是否希望某樣式對所有子孫元素都起作用。這種后代選擇器還有個作用，就是創(chuàng)建類似命名空間的作用。比如上述代碼樣式的作用域明顯為li。 兼容瀏覽器：IE6+、Firefox、Chrome、Safari、Opera5. X以下是代碼片段：acolor:red; ulmargin-left:0; 標簽選擇器。使用標簽選擇器作用于作用域范圍內的所有對應標簽。優(yōu)先級僅僅比*高。 兼容瀏覽器：IE6+、Firefox、Chrome、Safari、Opera6. X:visited和X:link以下是代碼片段：a:linkcolor:red; a:vistedcolor:purple; 使用:link偽類作用于未點擊過的鏈接標簽。:hover偽類作用于點擊過的鏈接。 兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera7. X+Y以下是代碼片段：ul+p color:red; 相鄰選擇器，上述代碼中就會匹配在ul后面的第一個p，將段落內的文字顏色設置為紅色。(只匹配第一個元素) 兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera8. XY以下是代碼片段：div#containerul border:1pxsolidblack; ListItem Child ListItem ListItem ListItem 子選擇器。與后代選擇器X Y不同的是，子選擇器只對X下的直接子級Y起作用。在上面的css和html例子中，div#containerul僅對container中最近一級的ul起作用。從理論上來講X Y是值得提倡選擇器，可惜IE6不支持。 兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera9. X Y以下是代碼片段：ulp color:red; 相鄰選擇器，與前面提到的X+Y不同的是，XY匹配與X相同級別的所有Y元素，而X+Y只匹配第一個。 兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera10. Xtitle以下是代碼片段：atitle color:green; 屬性選擇器。比如上述代碼匹配的是帶有title屬性的鏈接元素。 兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera11. Xtitle=foo以下是代碼片段：ahref= color:#1f6053; 屬性選擇器。 上面的代碼匹配所有擁有href屬性，且href為的所有鏈接。 這個功能很好，但是多少又有些局限。如果我們希望匹配href包含的所有鏈接該怎么做呢？看下一個選擇器。 兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera12. Xtitle*=以下是代碼片段：ahref*= color:#1f6053; 屬性選擇器。正如我們想要的，上面代碼匹配的是href中包含的所有鏈接。 兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera13. Xhref=http以下是代碼片段：ahref=http background:url(path/to/external/icon.png)no-repeat; padding-left:10px; 屬性選擇器。上面代碼匹配的是href中所有以http開頭的鏈接。 兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera13. Xhref$=.jpg以下是代碼片段：ahref=http background:url(path/to/external/icon.png)no-repeat; padding-left:10px; 屬性選擇器。在屬性選擇器中使用$，用于匹配結尾為特定字符串的元素。在上面代碼中匹配的是所有鏈接到擴展名為.jpg圖片的鏈接。（注意，這里僅僅是.jpg圖片，如果要作用于所有圖片鏈接該怎么做呢，看下一個選擇器。） 兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera14. Xdata-*=foo 在上一個選擇器中提到如何匹配所有圖片鏈接。如果使用Xhref$=.jpg實現(xiàn)，需要這樣做：以下是代碼片段：ahref$=.jpg, ahref$=.jpeg, ahref$=.png, ahref$=.gif color:red; 看上去比較麻煩。另一個解決辦法是為所有的圖片鏈接加一個特定的屬性，例如data-file html代碼如下：以下是代碼片段：圖片鏈接 css代碼如下：以下是代碼片段：adata-filetype=image color:red; 這樣所有鏈接到圖片的鏈接字體顏色為紅色。 兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera15. Xfoo=bar 屬性選擇器。屬性選擇器中的波浪線符號可以讓我們匹配屬性值中用空格分隔的多個值中的一個。看下面例子： html代碼如下：以下是代碼片段：ClickMe,Fool css代碼如下：以下是代碼片段：adata-info=external color:red; adata-info=image border:1pxsolidblack; 在上面例子中，匹配data-info屬性中包含“external”鏈接的字體顏色為紅色。匹配data-info屬性中包含“image”的鏈接設置黑色邊框。 兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera17. X:checked checked偽類用來匹配處于選定狀態(tài)的界面元素，如radio、checkbox。以下是代碼片段：inputtype=radio:checked border:1pxsolidblack; 上面代碼中匹配的是所有處于選定狀態(tài)的單選radio，設置1px的黑色邊框。 兼容瀏覽器：IE9+、Firefox、Chrome、Safari、Opera18. X:after和X:before 這兩個偽類與content結合用于在元素的前面或者后面追加內容，看一個簡單的例子：以下是代碼片段：h1:aftercontent:url(/i/logo.gif) 上面的代碼實現(xiàn)了在h1標題的后面顯示一張圖片。 我們也經常用它來實現(xiàn)清除浮動，寫法如下：以下是代碼片段：.clearfix:after content:; display:block; clear:both; visibility:hidden; font-size:0; height:0; .clearfix *display:inline-block; _height:1%; 19. X:hover以下是代碼片段：div:hover background:#e3e3e3; :hover偽類設定當鼠標劃過時元素的樣式。上面代碼中設定了div劃過時的背景色。 需要注意的是，在ie 6中，:hover只能用于鏈接元素。 這里分享一個經驗，在設定鏈接劃過時出現(xiàn)下滑線時，使用border-bottom會比text-decoration顯得更漂亮些。代碼如下：以下是代碼片段：a:hover border-bottom:1pxsolidblack; 兼容瀏覽器：IE6+、Firefox、Chrome、Safari、Opera20. X:not(selector)以下是代碼片段：div:not(#container) color:blue; 否定偽類選擇器用來在匹配元素時排除某些元素。在上面的例子中，設定除了id為container的div元素字體顏色為blue。 兼容瀏覽器：IE9+、Firefox、Chrome、Safari、Opera21. X:pseudoElement :偽類用于給元素片段添加樣式。比如一個段落的第一個字母或者第一行。需要注意的是，這個:偽類只能用于塊狀元素。 下面的代碼設定了段落中第一個字母的樣式：以下是代碼片段：p:first-letter float:left; font-size:2em; font-weight:bold; font-family:cursive; padding-right:2px; 下面的代碼中設定了段落中第一行的樣式：以下是代碼片段：p:first-line font-weight:bold; font-size:1.2em; 兼容瀏覽器：IE6+、Firefox、Chrome、Safari、Opera （IE6竟然支持，有些意外啊。）22. X:nth-child(n)以下是代碼片段：li:nth-child(3) color:red; 這個偽類用于設定一個序列元素（比如li、tr）中的第n個元素（從1開始算起）的樣式。在上面例子中，設定第三個列表元素li的字體顏色為紅色。 看一個更靈活的用法，在下面例子中設定第偶數(shù)個元素的樣式，可以用它來實現(xiàn)隔行換色：以下是代碼片段：tr:nth-child(2n) background-color:gray; 兼容瀏覽器：IE9+、Firefox、Chrome、Safari23. X:nth-last-child(n)以下是代碼片段：li:nth-last-child(2) color:red; 與X:nth-child(n)功能類似，不同的是它從一個序列的最后一個元素開始算起。上面例子中設定倒數(shù)第二個列表元素的字體顏色。 兼容瀏覽器：IE9+、Firefox、Chrome、Safari、Opera24. X:nth-of-type(n)以下是代碼片段：ul:nth-of-type(3) border:1pxsolidblack; 與X:nth-child(n)功能類似，不同的是它匹配的不是某個序列元素，而是元素類型。例如上面的代碼設置頁面中出現(xiàn)的第三個無序列表ul的邊框。 兼容瀏覽器：IE9+、Firefox、Chrome、Safari25. X:nth-last-of-type(n)以下是代碼片段：ul:nth-last-of-type(3) border:1pxsolidblack; 與X:nth-of-type(n)功能類似，不同的是它從元素最后一次出現(xiàn)開始算起。上面例子中設定倒數(shù)第三個無序列表的邊框 兼容瀏覽器：IE9+、Firefox、Chrome、Safari、Opera26. X:first-child :first-child偽類用于匹配一個序列的第一個元素。我們經常用它來實現(xiàn)一個序列的第一個元素或最后一個元素的上（下）邊框，如：以下是代碼片段：ul:nth-last-of-type(3) border:1pxsolidblack; 兼容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera27. X:last-child以下是代碼片段：ulli:last-child border-bottom:none; 與:first-child類似，它匹配的是序列中的最后一個元素。 兼容瀏覽器：IE9+、Firefox、Chrome、Safari、Opera28. X:only-child以下是代碼片段：divp:only-child color:red; 這個偽類用的比較少。在上面例子中匹配的是div下有且僅有一個的p，也就是說，如果div內有多個p，將不匹配。以下是代碼片段：Myparagraphhere. Twoparagraphstotal. Twoparagraphstotal. 在上面代碼中第一個div中的段落p將會被匹配，而第二個div中的p則不會。 兼容瀏覽器：IE9+、Firefox、Chrome、Safari、Opera29. X:only-of-type以下是代碼片段：li:only-of-type font-weight:bold; 這個偽類匹配的是，在它上級容器下只有它一個子元素，它沒有鄰居元素。例如