一、全瀏覽器支持的css選擇器（由于很好理解，demo省略）
1.*
*通配符選擇器，經常用于css reset，即樣式重置，清理標簽的默認樣式，但現在一般不提倡直接使用*了，主要是*會匹配所有標簽，相當耗資源。*在css的優先級中是最低的。

* {
margin: 0;
padding: 0;
}
也可以用*來匹配某一元素下的所有子元素：

#container * {
border: 1px solid black;
}
2.#X
#+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。



二、除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。

猛擊這里進入這里查看demo

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

猛擊這里進入這里查看demo

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

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

猛擊這里進入這里查看demo

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

猛擊這里進入這里查看demo

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

猛擊這里進入這里查看demo

11.X[title=""]
a[title="明河共影"]{
color:#096;
} 屬性選擇器，上述代碼不只匹配帶有title屬性，更匹配title屬性等于明河共影的鏈接元素。[]內不只可用title屬性，還可以使用其他屬性。

猛擊這里進入這里查看demo

12.X[title*=""]
a[title*="明"]{
color:#096;
} 加了*號，意味著是模糊匹配，比如上述代碼，會匹配title屬性為明或明河或明河共影等帶有明字的鏈接屬性。

猛擊這里進入這里查看demo

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

猛擊這里進入這里查看demo

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

猛擊這里進入這里查看demo

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屬性。

猛擊這里進入這里查看demo

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。

猛擊這里進入這里查看demo

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

猛擊這里進入這里查看demo

留意demo中是選中單選框后改變樣式。

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

三、除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%;
} 我想上面這段代碼，很多朋友都非常熟悉，是清理浮動時常用的hack方法。:after偽類與content結合使用，用于往元素類追加內容。:after偽類還有個妙用：用于產生陰影，點擊這里查看。

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

在原文教程中提到一個東西很有意思，即使用border-bottom: 1px solid black; 要好于text-decoration: underline;，不妨看下下面明河制作的demo。

猛擊這里進入這里查看demo

從實際的效果來看，使用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;
}
::偽類，用于給元素的片段添加樣式，這如何理解呢？比如你要讓一個段落的第一行的文字加粗，那么這個選擇器是不二之選。

猛擊這里進入這里查看demo

除此之外，你還可以給第一個字加上特殊樣式，這個應用還是非常常見的

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

四、css3 結構性偽類選擇器22.X:nth-child(n)
li:nth-child(3) {
color: red;
}
接下來的幾個偽類選擇器使用上非常類似，功能也比較接近。

:nth-child(n)，用于匹配索引值為n的子元素。索引值從1開始。

猛擊這里進入這里查看demo

X:nth-child()用法實際上有三種變化，demo的用法是最簡單的，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)是從最后一個開始算索引。

猛擊這里進入這里查看demo

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)

猛擊這里進入這里查看demo

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就可以支持了，這個偽類還是非常有用的。

猛擊這里進入這里查看demo

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

猛擊這里進入這里查看demo

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

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

猛擊這里進入這里查看demo

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)，匹配集合元素中的第一個元素。

五、明河結語
明河翻譯這邊文章費了不下6個時間，花了很多的心血下去，自己的確受益匪淺，希望這邊文章對各位有些用處，如果你有任何疑問，都可以給明河留言。
打包下載地址：css-selectors.rar