1、常用選擇器
常用選擇器用於查找某一類別的元素，比如段落或者標題。
例：p{font-size:14px;}表示選擇所有的段落元素；
2、後代選擇器
後代選擇器用於查找特定元素或元素組的後代，後代選擇器由兩個選擇器之間的空格表示。
例： div p{font-size:14px;}表示選擇所有div元素裏的p元素。
3、ID選擇器
用於查找指定id的元素，id選擇器以#開始。
例：#container{border:1px solid red;}
4、類選擇器
用於查找指定類名的元素，以"."開始。
例：.container{border:1px solid red;}
5、僞類選擇器
有時候我們需要根據除文檔結構以外的其它條件對元素應用樣式，比如表單元素或鏈接的狀態，這個時候就需要僞類選擇器。
例：a:link{color:red;}
a:visited{color:green;}
a:hover,a:focus,a:active{color:yellow;}
input:focus{border:1px solid red;}
:link和:visited這種的被稱爲鏈接僞類，:hover,:focus,:active這種的被稱爲動態僞類，因爲需要在元素上做一些操作纔會觸發。
注意一點，ie6只注意:active和:hover選擇器，會忽略:focus；
ie7支持:hover，會忽略:active,:focus；
6、通用選擇器
通用選擇器即使用通配符進行選擇，雖然功能很強大，但是很少使用，通用選擇器使用*表示。
例：*{margin:0px;padding:0px;}
7、子選擇器
子選擇器和後代選擇器都是選擇元素的後代，不過區別在於子選擇器只選擇直屬於元素的後代；後代選擇器只會選擇元素的所有後代（無論是不是直屬）。
/*子選擇器會選擇li1到li5，嵌套的li不會選擇*/
.t>li{border:1px solid red;
/*後代選擇器選擇.t中所有的li元素*/
.t li{background-color:green;}
<ul class="t">
<li id="li1">1</li>
<li id="li2">1</li>
<li id="li3">1</li>
<li id="li4">1</li>
<li id="li5">
<ul>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
</ul>
</li>
</ul>
注意：此選擇器IE6不支持；
8、相鄰同胞選擇器
用於定位同一個父元素下某個元素之後的元素。
/*將選擇h2後的第一個p元素*/
h2 + p{background-color:red;}
<h2>This is Title</h2>
<p>this is p</p>
<p>myfsdfsdfsd</p>
注意：此選擇器IE6不支持；
9、屬性選擇器
用於選擇元素中包含某屬性或屬性爲特定值的元素選擇。
例：input[type="text"]，input[type="button"]，我們可以使用屬性選擇器爲不同的表單元素設置不同的樣式。
注意：此選擇器IE6不支持。
參考書籍：高級web標準解決方案（第2版）