【轉】30個你不可不知的CSS選擇器

1、五大基本選擇符

1. *（通配符）
*通配符選擇器，常常用於css reset（樣式重置），清理標籤的默認樣式，但如今通常不提倡直接使用*了，主要是*會匹配全部標籤，至關耗資源。*在css的優先級中是最低的。

* {margin: 0; padding: 0;} 也能夠用*來匹配某一元素下的全部子元素：

#container * {border: 1px solid black;}

2. #X（ID）
#+id名，這是平常經常使用的css選擇器，用於匹配id爲XXX的元素，id選擇器的優點是精準，高優先級（優先級基數爲100，遠高於class的10），做爲javascript腳本鉤子的不二選擇，一樣缺點也很明顯：優先級太高，重用性差，因此在使用id選擇器前，咱們最好問下本身，真的到了非用id選擇器的地步？

#container { width: 960px; margin: auto;}

3. .X（類）
.+class名，標準的樣式選擇器，與id選擇器的區別是樣式選擇器能夠選擇多個元素。樣式選擇器是提倡使用的選擇器，也是平常前端人員用到最多的選擇器了。

.error {color: red;}

4. X Y（後代）
li a {text-decoration: none;}
目前很是經常使用的css選擇器，用於選取X元素下子元素Y，這裏有個要留意的點是，這種方式的選擇器將選取其下全部匹配的子元素，無視層級，因此有的狀況是不宜使用的，好比上述的代碼去掉li下的全部a的下劃線，但li裏面還有個ul，我不但願ul下的li的a去掉下劃線。

使用此子孫選擇器的時候要考慮是否但願某樣式對全部子孫元素都起做用。

這種子孫選擇器還有個做用，就是建立相似命名空間的做用。好比上述代碼樣式的做用域明顯爲li。

5. X（標籤）
a { color: red; }
ul { margin-left: 0; }
標籤選擇器，優先級僅僅比*高，經常使用於css reset（樣式重置）。

 

2、除IE6外瀏覽器支持的css選擇器

6. X:link X:visited X:hover X:active
a:link { color: red; }
a:visted { color: purple; }
僞類選擇器，visted已被訪問過的樣式，hover鼠標通過的樣式，link未被訪問的樣式。三種僞類選擇器經常使用於連接，但不是說只適用於連接，惋惜的是IE6只支持將這三種僞類選擇器做用於連接。

這裏說明一點，因爲CSS優先級的關係(後面比前面的優先級高)，這幾個僞類的書寫順序，通常是link、visted、hover、active。

7. X + Y（相鄰）
ul + p { color: red;}
相鄰選擇器，上述代碼中就會匹配在ul後面的第一個p，將段落內的文字顏色設置爲紅色。(只匹配一個元素)

8. X > Y（子）
子選擇器，留意X > Y與X Y的區別，前者是子孫選擇器，即無視層級，而X Y是字選擇器，只匹配X下的子元素Y。

從理論上來說X > Y是值得提倡選擇器，惋惜IE6不支持。

9. X ~ Y
ul ~ p {color: red;}
相鄰選擇器，與X+Y相似，不一樣的是X ~ Y匹配的是元素集合，如上述代碼，匹配的是全部ul相鄰的p

10. X[title]
a[title] { color: green;}
屬性選擇器，如上述代碼匹配的是帶有title屬性的連接元素。

11. X[title=""]
a[title="maomao"] {color:#096;}
屬性選擇器，上述代碼不僅匹配帶有title屬性，更匹配title屬性等於maomao的連接元素。[]內不僅可用title屬性，還可使用其餘屬性。

12. X[title*=""]
a[title*="mao"] {color:#096;}
加了*號，意味着是模糊匹配，如上述代碼，會匹配title屬性爲mao或maomao或maomao520等帶有maomao的連接屬性。

13. X[title^=""]
a[title^="maomao"]{color:#096;}
模糊匹配,與*的做用相反，^起到排除的做用，好比上述代碼，會匹配title屬性不帶有maomao的連接屬性。

14. X[href$=""]
a[href$=".png"] { color: red;}
在屬性選擇器中多一個$符號，用於匹配結尾爲特定字符串的元素，好比上述代碼匹配的就是href屬性值的結尾爲.png的連接。

15.X[data-*=""]
a[data-filetype="image"] {color: red;}
data-filetype這個屬性目前用的實在很少，但有些場合很是好用。好比我要匹配全部的數據類型爲圖片的連接，若是使用X[href$=""]的方式以下：

a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"] {color: red;}

而使用data-filetype，只要：
a[data-filetype="image"] {color: red;}
固然前提是你給每個連接加上data-filetype屬性。

16.X[foo~=""]
a[data-info~="external"] {color: red;}
a[data-info~="image"] {border: 1px solid black;}
這也是很是少用的選擇器，加上~號，有一種狀況特別適用，好比你有個data-filetype=」external image」屬性，這時候我但願分別針對external和image樣式控制。

a[data-info~="external"] {color: red;}
a[data-info~="image"] {border: 1px solid black;}
上述代碼會匹配data-filetype=」external」、data-filetype=」image」、data-filetype=」external image」的a。

17.X:checked
input[type=radio]:checked {border: 1px solid black;}
這個僞類選擇器只用於匹配帶有checked屬性的元素，好比radio、checkbox即單選框和多選框。

目前這個僞類選擇器，IE9下都不支持，非IE瀏覽器基本上都支持。

 

3、除IE8如下的瀏覽器支持的css選擇器

18.X:after
.clearfix:after {content: "";display: block;clear: both; visibility: hidden;font-size: 0; height: 0;}

.clearfix {*display: inline-block;_height: 1%;0}
我想上面這段代碼，不少朋友都很是熟悉，是清理浮動時經常使用的hack方法。:after僞類與content結合使用，用於往元素類追加內容。:after僞類還有個妙用：用於產生陰影。

19.X:hover
div:hover {background: #e3e3e3;}
hover在前面已經介紹過，IE6下只支持a的hover。

這裏提到一個頗有意思的東西，即便用border-bottom: 1px solid black; 要好於text-decoration: underline；從實際的效果來看，使用border-bottom的距離比text-decoration來的合理，但使用border-bottom存在一些風險，好比顏色問題。

20.X:not(selector)
div:not(#container) {color: blue;}
否認僞類選擇器，這仍是比較好理解的，上述將會把非id爲container的div的字體顏色設置爲藍色。

:not僞類IE8並不支持，IE9已經支持了。

21.X::pseudoElement
p::first-line {font-weight: bold; font-size: 1.2em;}
::僞類，用於給元素的片斷添加樣式，這如何理解呢？好比你要讓一個段落的第一行的文字加粗，那麼這個選擇器是不二之選。

除此以外，你還能夠給第一個字加上特殊樣式，這個應用仍是很是常見的

p::first-letter { float: left;font-size: 2em;font-weight: bold;font-family: cursive; padding-right: 2px;}
IE6竟然支持！這足以讓人驚喜的…..

 

4、css3 結構性僞類選擇器

22.X:nth-child(n)
li:nth-child(3) {color: red;}
:nth-child(n)，用於匹配索引值爲n的子元素。索引值從1開始。

X:nth-child()用法實際上有三種變化。X:nth-child()更強大的用處在於奇偶匹配。有興趣的請看《Understanding :nth-child Pseudo-class Expressions》,《CSS3 :nth-child()僞類選擇器》

23.X:nth-last-child(n)
li:nth-last-child(2) {color: red;}
:nth-child(n)，是從第一個開始算索引，而X:nth-last-child(n)是從最後一個開始算索引。

24.X:nth-of-type(n)
ul:nth-of-type(3) {border: 1px solid black;}
nth-of-type與nth-child的效果是驚人的類似，想要更多的瞭解nth-of-type請看《Alternative for :nth-of-type() and :nth-child()》，《:nth-of-type(N)》。

25.X:nth-last-of-type(n)
ul:nth-last-of-type(3) {border: 1px solid black;}
:nth-last-child效果類似。

26.X:first-child
ul li:first-child {border-top: none;}
匹配子集的第一個元素。IE7就能夠支持了，這個僞類仍是很是有用的。

27.X:last-child
ul > li:last-child {color: green;}
與:first-child效果相反

留意IE8支持:first-child,但不支持:last-child。

28.X:only-child
div p:only-child {color: red;}
這個僞類通常用的比較少，好比上述代碼匹配的是div下的有且僅有一個的p，也就是說，若是div內有多個p，將不匹配。

29.X:only-of-type
li:only-of-type { font-weight: bold;}
與:only-child相似。

30.X:first-of-type
ul:first-of-type{font-weight: bold;}
等價於:nth-of-type(1)，匹配集合元素中的第一個元素。

（原文出處）