一、元素選擇器（所有瀏覽器支持）
元素選擇器（標簽名選擇器）其實就是文檔的元素，如html,body,p,div等等，
下面例子中選擇了span元素，並設置了字體顏色為紅色。
<body> <p>這里使用<span>標簽名選擇器</span>改變了樣式</p> </body>
CSS：
span{ color: red; }
效果：
二、類選擇器
（所有瀏覽器都支持類選擇器，但多類選擇器（.className1.className2）不被ie6支持。）
類選擇器根據類名來選擇，前面以”.”來標志，使用類選擇器之前需要在html元素上定義類名，類名自定義。
<body> <div class="demo"></div> </body>
CSS
.demo{ width: 150px; height: 150px; background:#0e0; }
效果：
三、ID選擇器（所有瀏覽器都支持）
根據元素ID來選擇元素，具有唯一性。前面以”#”號來標志。
<body> <div id="demo"></div> </body>
CSS
#demo{ width: 150px; height: 150px; background:red; }
效果：
四、后代選擇器( E F )（所有瀏覽器都支持）
后代選擇器也稱為包含選擇器，用來選擇特定元素或元素組的后代，后代選擇器用兩個常用選擇器，中間加一個空格表示。
其中前面的常用選擇器選擇祖元素，后面的常用選擇器選擇子元素，樣式最終會應用於子元素中。
比如說:E F，前面E為祖先元素，Ｆ為后代元素。
所表達的意思就是選擇了Ｅ元素的所有后代Ｆ元素，這里Ｆ不管是E元素的子元素或者是孫元素或者是更深層次的關系，都將被選中。
換句話說，不論Ｆ在Ｅ中有多少層關系，都將被選中。
<body> <div class="demo"> <div class="one"> <ul> <li>列表一</li> </ul> <p>這里是一個段落</p> </div> </div> </body>
CSS
.demo .one{ color: red; }
效果：
五、通配符選擇器（所有瀏覽器支持）
1、通用選擇器用*來表示，下例中表示所有的元素的字體大小都是12px；
*{
font-size: 12px;
}
2、 通用選擇器還可以和后代選擇器組合。
<body> <p> 所有的文本都被定義成紅色<br> <span>所有的文本都被定義成紅色</span><br> <span>所有的文本都被定義成紅色</span><br> <span>所有的文本都被定義成紅色</span> </p> </body>
CSS
p *{ color: red; }
表示所有p元素后代的所有元素都應用這個樣式，注意，若p元素后沒有元素，則樣式沒有效果。
3、與后代選擇器的搭配容易出現瀏覽器不能解析的情況。
<body> <p> <p>所有的<span>文本</span>都被定義成紅色</p> <span>此處沒有變色</span><br> <span>此處沒有變色</span> </p> </body>
CSS
p *{ color: red; }
效果：
六、子元素選擇器（IE6不支持）
請注意這個選擇器與后代選擇器的區別：
子選擇器（child selector）僅是指它的直接后代，或者你可以理解為作用於子元素的第一個后代。
而后代選擇器是作用於所有子后代元素。
后代選擇器通過空格來進行選擇，而子選擇器是通過“>”進行選擇
<body> <p id="links"> <a href="#">鏈接一</a> <span><a href="#">鏈接二</a></span> <span><a href="#">鏈接三</a></span> </p> </body>
CSS
#links a {color:red;} #links > a {color:blue;}
效果：
七、群組選擇器（所有瀏覽器都支持）
當幾個元素樣式屬性一樣時，可以共同調用一個聲明，元素之間用逗號分隔。
<body> <p>這里是一個段落!</p> <ul><li>列表</li></ul> <a href="#" class="demo1">鏈接一</a><br> <span class="demo2">文字文字！</span> </body>
CSS
p,li{ color: blue; } .demo1,.demo2{ color: red; }
效果：
八、相鄰兄弟元素選擇器（E+F）（IE6不支持這個選擇器）
相鄰兄弟選擇器可以選擇緊接在另一元素后的元素，而且他們具有一個相同的父元素。
換句話說，EF兩元素具有一個相同的父元素，而且Ｆ元素在Ｅ元素后面，而且相鄰，這樣我們就可以使用相鄰兄弟元素選擇器來選擇Ｆ元素（選中的僅一個元素）。
<body> <ul> <li>列表一</li> <li class="active">列表二</li> <li>列表三</li> <li>列表四</li> <li>列表五</li> </ul> </body>
CSS
.active+li{ background: #0e0; }
效果：
注釋：選擇了li.active后面相鄰的li元素，注意了和li.active后面相鄰的元素僅只有一個的。
九、通用兄弟選擇器（Ｅ 〜 Ｆ）（IE6不支持這個選擇器）
通用兄弟元素選擇器是CSS3新增加一種選擇器。
這種選擇器將選擇某元素后面的所有兄弟元素，他們也和相鄰兄弟元素類似，需要在同一個父元素之中。
換句話說，E和F元素是屬於同一父元素之內，並且F元素在Ｅ元素之后，那么E ~ F 選擇器將選擇中所有Ｅ元素后面的Ｆ元素。
<body> <ul> <li>列表一</li> <li class="active">列表二</li> <li>列表三</li> <li>列表四</li> <li>列表五</li> </ul> </body>
CSS
.active~li{ background: #0e0; }
效果：
選擇器的優先級問題？
如何規定優先級？
一般而言，選擇器越特殊，優先級越高。也就是選擇器指向越准確，它的優先級就越高。
如用數字來表示優先級高低：
標簽名選擇器 = 1
類選擇器 = 10
ID選擇器 = 100
例：
結果是藍色，color沒有效果
結果：
原因：
.demo span{ color: blue;}的選擇器優先級是10+1=11
.color{color: red;}的優先級是10
所以瀏覽器顯示的是藍色。
后代選擇器定位原則：
對於后代選擇器，瀏覽器是如何查找元素的呢？
瀏覽器CSS匹配不是從左到右進行查找，而是從右到左進行查找。
比如DIV#divBox p span.red{color:red;}，
瀏覽器的查找順序如下：先查找html中所有class='red'的span元素，找到后，再查找其父輩元 素中是否有p元素，再判斷p的父元素中是否有id為divBox的div元素，如果都存在則匹配上。
瀏覽器從右到左進行查找的好處是為了盡早過濾掉一些無關的樣式規則和元素。
如果按從左到右查找，那會先查找到很多不相關的p和span元素。
而如果按從左到右的方式進行查找，則首先就查找到<span class='red'>的元素。
firefox稱這種查找方式為key selector(關鍵字查詢)，所謂的關鍵字就是樣式規則中最后(最右邊)的規則，上面的key就是span.red。