你也許已經掌握了id、class、後台選擇器這些基本的css選擇器。但這遠遠不是css的全部。下面向大家系統的解析css中30個最常用的選擇器，包括我們最頭痛的瀏覽器相容性問題。掌握了它們，才能真正領略css的巨大彈性。
1. *
* { margin: 0; padding: 0; }
星狀選擇符會在頁面上的每個元素上運作。 web設計者常用它將頁面中所有元素的margin和padding設為0。 *選擇符號也可以在子選擇器中使用。
#container * { border: 1px solid black; }上面的程式碼中會套用在id為container元素的所有子元素中。 除非必要，我不建議頁面中過的使用星狀選擇符，因為他的作用域太大，相當耗瀏覽器資源。 相容瀏覽器：IE6+、Firefox、Chrome、Safari、Opera
2. #X
#container { width: 960px; margin: auto; }井號作用域有對應id的元素。 id是我們最常用的css選擇器之一。 id選擇器的優勢是精準，高優先權(優先權基數為100，遠高於class的10)， 作為javascript腳本鉤子的不二選擇，同樣缺點也很明顯優先級過高，重用性差，所以在使用id選擇器前，我們最好問下自己，真的到了非用id選擇器的地步? 相容瀏覽器：IE6+、Firefox、Chrome、Safari、Opera
3. .X
.error { color: red; }這是一個class (類)選擇器。 class選擇器與id選擇器的不同是class選擇器能作用於期望樣式化的一組元素。 相容瀏覽器：IE6+、Firefox、Chrome、Safari、Opera
4. X Y
li a { text-decoration: none; }這也是我們最常用的選擇者－後代選擇器。用來選取X元素下子元素Y，要留意的點是，這種方式的選擇器會選取其下所有符合的子元素，無視層級，所以有的情況是不宜使用的，例如上述的程式碼去掉li下的所有a的底線，但li裡面還有個ul，我不希望ul下的li的a去掉下劃線。使用此後代選擇器的時候要 考慮是否希望某個樣式對所有子孫元素都起作用。這種後代選擇器還有個作用，就是創造類似命名空間的作用。例如上述程式碼樣式的作用域明顯為li。 相容瀏覽器：IE6+、Firefox、Chrome、Safari、Opera
5. X
a { color: red; }
ul { margin-left: 0; }標籤選擇器。使用標籤選擇器作用於作用域範圍內的所有對應標籤。優先順序僅比*高。 相容瀏覽器：IE6+、Firefox、Chrome、Safari、Opera
6. X:visited和X:link
a:link { color: red; } a:visted { color: purple; }
a:link { color: red; }
a:visted { color: purple; }使用:link偽類作用於未點擊過的連結標籤。 :hover偽類作用於點擊過的連結。 相容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera
7. X+Y
ul + p { color: red; }相鄰選擇器，上述程式碼中就會匹配在ul後面的第一個p，將段落內的文字顏色設置為紅色。 (只符合第一個元素) 相容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera
8. X>Y
div#container > ul {border: 1px solid black;}
<div id="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li>
</ul>
</div>子選擇器。與後代選擇器X Y不同的是，子選擇器只對X下的直接子級Y起作用。在上面的css和html例子中，div#container>ul僅對container中最近一級的ul起作用。從理論上來講X > Y是值得提倡選擇器，可惜IE6不支援。 相容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera
9. X ~ Y
ul ~ p {color: red;}相鄰選擇器，與前面提到的X+Y不同的是，X~Y與X相同等級的所有Y元素，而X+Y只符合第一個。 相容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera
10. X[title]
a[title] {color: green;}屬性選擇器。例如上述程式碼匹配的是帶有title屬性的連結元素。
相容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera
11. X[title=”foo”]
a[href="http://www.xuanfengge.com"] {color: #1f6053;}屬性選擇器。 上面的程式碼符合所有擁有href屬性，且href為http://www.xuanfengge.com的所有連結。
這個功能很好，但是多少又有些限制。如果我們希望符合href包含css9.net的所有連結該怎麼做呢?看下一個選擇器。 相容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera
12. X[title*=”css9.net”]
a[href*="xuanfengge.com"] {color: #1f6053;}屬性選擇器。正如我們想要的，上面程式碼匹配的是href中包含”xuanfengge.com”的所有連結。
相容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera
13. X[href^=”http”]
a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"] {
color: red;
}看起來比較麻煩。另一個解決方法是為所有的圖片連結加上一個特定的屬性，例如‘data-file’
html代碼
<a href="path/to/image.jpg" data-filetype="image"> 图片链接 </a>
css代码如下： a[data-filetype="image"] { color: red;}這樣所有連結到圖片的連結字體顏色為紅色。
相容瀏覽器：IE7+、Firefox、Chrome、Safari、Opera
15. X[foo~=”bar”]
屬性選擇器。屬性選擇器中的波浪線符號可以讓我們匹配屬性值中用空格分隔的多個值中的一個。請看下面範例：
html程式碼
<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>
css程式碼
a[data-info~="external"] {
color: red;
}
a[data-info~="image"] {
border: 1px solid black;
}在上面範例中，符合data-info屬性中包含「external」連結的字體顏色為紅色。匹配data-info屬性中包含“image”的連結設定黑色邊框。
兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
17. X:checked
checked伪类用来匹配处于选定状态的界面元素，如radio、checkbox。
input[type=radio]:checked {
border: 1px solid black;
}上面代码中匹配的是所有处于选定状态的单选radio，设置1px的黑色边框。
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera
18. X:after和X:before
这两个伪类与content结合用于在元素的前面或者后面追加内容，看一个简单的例子：
h1:after {content:url(/i/logo.gif)}上面的代码实现了在h1标题的后面显示一张图片。
我们也经常用它来实现清除浮动，写法如下：
.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只能用于链接元素。
这里分享一个经验，在设定链接划过时出现下滑线时，使用border-bottom会比text-decoration显得更漂亮些。代码如下：
a:hover {
border-bottom: 1px solid black;
}兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera
20. X:not(selector)
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的字体颜色为红色。
看一个更灵活的用法，在下面例子中设定第偶数个元素的样式，可以用它来实现隔行换色：
tr:nth-child(2n) {
background-color: gray;
}兼容浏览器：IE9+、Firefox、Chrome、Safari
23. X:nth-last-child(n)
li:nth-last-child(2) {
color: red;
}与X:nth-child(n)功能类似，不同的是它从一个序列的最后一个元素开始算起。上面例子中设定倒数第二个列表元素的字体颜色。
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera
24. X:nth-of-type(n)
ul:nth-of-type(3) {
border: 1px solid black;
}与X:nth-child(n)功能类似，不同的是它匹配的不是某个序列元素，而是元素类型。例如上面的代码设置页面中出现的第三个无序列表ul的边框。
兼容浏览器：IE9+、Firefox、Chrome、Safari
25. X:nth-last-of-type(n)
ul:nth-last-of-type(3) { border: 1px solid black; }与X:nth-of-type(n)功能类似，不同的是它从元素最后一次出现开始算起。上面例子中设定倒数第三个无序列表的边框
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera
26. X:first-child
:first-child伪类用于匹配一个序列的第一个元素。我们经常用它来实现一个序列的第一个元素或最后一个元素的上(下)边框，如：
ul:nth-last-of-type(3) {
border: 1px solid black;
}兼容浏览器：IE7+、Firefox、Chrome、Safari、Opera
27. X:last-child
ul > li:last-child {
border-bottom:none;
}与:first-child类似，它匹配的是序列中的最后一个元素。
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera
28. X:only-child
div p:only-child {
color: red;
}这个伪类用的比较少。在上面例子中匹配的是div下有且仅有一个的p，也就是说，如果div内有多个p，将不匹配。
<div> <p> My paragraph here. </p> </div> <div> <p> Two paragraphs total. </p> <p> Two paragraphs total. </p> </div>
在上面代码中第一个div中的段落p将会被匹配，而第二个div中的p则不会。
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera
29. X:only-of-type
li:only-of-type {
font-weight: bold;
}这个伪类匹配的是，在它上级容器下只有它一个子元素，它没有邻居元素。例如上面代码匹配仅有一个列表项的列表元素。
兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera
30. X:first-of-type
:first-of-type伪类与:nth-of-type(1)效果相同，匹配出现的第一个元素。我们来看个例子：
ul:first-of-type > li:nth-child(2) {
font-weight: bold;
}方案二：
p + ul li:last-child {
font-weight: bold;
}方案三：
ul:first-of-type li:nth-last-child(1) {
font-weight: bold;
}兼容浏览器：IE9+、Firefox、Chrome、Safari、Opera。
总结：
如果你正在使用老版本的浏览器，如IE 6，在使用上面css选择器时一定要注意它是否兼容。不过，这不应成为阻止我们学习使用它的理由。在设计时，你可以参考浏览器兼容性列表，也可以通过脚本手段让老版本的浏览器也支持它们。
另一点，我们在使用javascript类库的选择器时，例如jquery，要尽可能的使用这些原生的css3选择器，因为类库的选择器引擎会通过浏览器内置解析它们，这样会获得更快的速度
