1簡介
要使用css對HTML頁面中的元素實現一對一，一對多或者多對一的控制，這就需要用到CSS選擇器。
HTML頁面中的元素就是通過CSS選擇器進行控制的。
什麼是選擇器呢？
每一條css樣式定義由兩部分組成，形式如下： 選擇器{樣式}。 在{}之前的部分就是“選擇器”。 “選擇器”指明了{}中的“樣式”的作用對象，也就是“樣式”作用於網頁中的哪些元素
1.1 類別選擇器
類選擇器根據類名來選擇
前面以”.”來標志，如：
.demoDiv{
color:#FF0000;
}
在HTML中，元素可以定義一個class的屬性。
如：
<div class="demoDiv">
這個區域字體顏色為紅色
</div>
同時，我們可以再定義一個元素：
<p class="demoDiv">
這個段落字體顏色為紅色
</p>
最後，用浏覽器浏覽，我們可以發現所有class為demoDiv的元素都應用了這個樣式。包括了頁面中的div元素和p元素。
上例我們給兩個元素都定義了class，但如果有很多個元素都會應用這個元素，那得一個個的定義元素，就會造成頁面重復的代碼太多，這種現象稱為“多類症”。
我們可以改成這樣來定義。
<div class="demoDiv">
<div>
這個區域字體顏色為紅色
</div>
同時，我們可以再定義一個元素：
<p>
這個段落字體顏色為紅色
</p>
</div>
這樣，我們就只是定義了一個類，同時把樣式應用到了所有的元素當中。
1.2 標簽選擇器
一個完整的HTML頁面是有很多不同的標簽組成，而標簽選擇器，則是決定哪些標簽
采用相應的CSS樣式，(在大環境中你可能出於不同的位置，但是不管怎麼樣，你總
是穿著同一套衣服，這件衣服就是由標簽選擇器事先給你限定好的，不管走到哪裡
都是這身衣服)比如，在style.css文件中對p標簽樣式的聲明如下：
p{
font-size:12px;
background:#900;
color:090;
}
復制代碼則頁面中所有p標簽的背景都是#900(紅色)，文字大小均是12px，顏色為#090(綠色)
，這在後期維護中，如果想改變整個網站中p標簽背景的顏色，只需要修改
background屬性就可以了，就這麼容易！
1.3 ID選擇器
根據元素ID來選擇元素，具有唯一性。
前面以”#”號來標志，在樣式裡面可以這樣定義：
#demoDiv{
color:#FF0000;
}
這裡代表id為demoDiv的元素的設置它的字體顏色為紅色。
我們在頁面上定義一個元素把它的ID定義為demoDiv，如：
<div id="demoDiv">
這個區域字體顏色為紅色
</div>
用浏覽器浏覽，我們可以看到因為區域內的顏色變成了紅色
再定義一個區域
<div>
這個區域沒有定義顏色
</div>
用浏覽器浏覽，與預期的一樣，區域沒有應用樣式，所以區域中的字體顏色還是默認的顏色黑色。
1.4 後代選擇器
後代選擇器也稱為包含選擇器，用來選擇特定元素或元素組的後代，後代選擇器用兩個常用選擇器，中間加一個空格表示。其中前面的常用選擇器選擇父元素，後面的常用選擇器選擇子元素，樣式最終會應用於子元素中。
如：
<style>
.father.child{
color:#0000CC;
}
</style>
<p class="father">
黑色
<label class="child">藍色
<b>也是藍色</b>
</label>
</p>
這裡我們定義了所有class屬性為father的元素下面的class屬性為child的顏色為藍色。後代選擇器是一種很有用的選擇器，使用後代選擇器可以更加精確的定位元素。
1.5 子選擇器
請注意這個選擇器與後代選擇器的區別，子選擇器（child selector）僅是指它的直接後代，或者你可以理解為作用於子元素的第一個後代。而後代選擇器是作用於所有子後代元素。後代選擇器通過空格來進行選擇，而子選擇器是通過“>”進行選擇，我們看下面的代碼：
Example Source Code
CSS：
#links a {color:red;}
#links > a {color:blue;}
HTML：
<p id="links">
<a href="#">Div+CSS教程</a>>
<span><a href="#">CSS布局實例</a></span>
<span><a href="#">CSS2.0教程</a></span>
</p>
我們將會看到第一個鏈接元素“Div+CSS教程”會顯示成藍色，而其它兩個元素會顯示成紅色。當然，或許你的浏覽器並不支持這樣的CSS選擇符。我們在一開始也強調了不太兼容的現狀。
子選擇器（>）和後代選擇器（空格）的區別：都表示“祖先-後代”的關系，但是>必須是“爸爸>兒子”，而空格不僅可以是“爸爸兒子”，還能是“爺爺兒”、“太爺爺兒子”。
1.6 偽類選擇器
有時候還會需要用文檔以外的其他條件來應用元素的樣式，比如鼠標懸停等。這時候我們就需要用到偽類了。以下是鏈接應用的偽類定義。
a:link{
color:#999999;
}
a:visited{
color:#FFFF00;
}
a:hover{
color:#006600;
}
/* IE不支持，用Firefox浏覽可以看到效果 */
input:focus{
background:# E0F1F5;
}
Link表示鏈接在沒有被點擊時的樣式。Visited表示鏈接已經被訪問時的樣式。Hover表示當鼠標懸停在鏈接上面時的樣式。
偽類不僅可以應用在鏈接標簽中，也可以應用在一些表單元素中，但表單元素的應用IE不支持，所以一般偽類都只會被應用在鏈接的樣式上。
1.7 通用選擇器
通用選擇器用*來表示。例如：
*{
font-size: 12px;
}
表示所有的元素的字體大小都是12px；同時通用選擇器還可以和後代選擇器組合。
例如：
p *{
……
}
表示所有p元素後代的所有元素都應用這個樣式。但是與後代選擇器的搭配容易出現浏覽器不能解析的情況，比如像這樣子：
<p>
所有的文本都被定義成紅色
<b>所有這個段落裡面的子標簽都會被定義成藍色</b>
<p>所有這個段落裡面的子標簽都會被定義成藍色</p>
<b>所有這個段落裡面的子標簽都會被定義成藍色</b>
<em>所有這個段落裡面的子標簽都會被定義成藍色</em>
</p>
這個例子裡面p標簽裡面嵌套了一個p標簽，這個時候樣式可能會出現與預期結果不相同的結果。
1.8 群組選擇器
當幾個元素樣式屬性一樣時，可以共同調用一個聲明，元素之間用逗號分隔。如：
p, td, li {
line-height:20px;
color:#c00;
}
#main p, #sider span {
color:#000;
line-height:26px;
}
.www_52css_com,#main p span {
color:#f60;
}
.text1 h1,#sider h3,.art_title h2 {
font-weight:100;
}
使用群組選擇器，將會大大的簡化CSS代碼，將具有多個相同屬性的元素，合並群組進行選擇，定義同樣的CSS屬性，這大大的提高了編碼效率，同時也減少了CSS文件的體積。
1.9 相鄰同胞選擇器
我們除了上面的子選擇器與後代選擇器，我們可能還希望找到兄弟兩個當中的一個，如一個標題h1元素後面緊跟了兩個段落p元素，我們想定位第一個段落p元素，對它應用樣式。我們就可以使用相鄰同胞選擇器。看下面的代碼：
Example Source Code CSS
h1 + p {color:blue}
HTML
<h1>一個非常專業的CSS站點</h1>
<p>Div+CSS教程中，介紹了很多關於CSS網頁布局的知識。</p>
<p>CSS布局實例中，有很多與CSS布局有關的案例。</p>
我們將會看到第一個段落“Div+CSS教程中，介紹了很多關於CSS網頁布局的知識。”文字顏色將會是藍色。而第二段則不受此CSS樣式的影響。
+和~的區別：類似上面一個，兩者都表示兄弟關系，但是+必須是“大哥+二哥”，~還能是“大哥~三弟”、“二哥~四妹”
1.10 屬性選擇器
您可以用判斷html標簽的某個屬性是否存在的方法來定義css
例如：
abbr[title]{
color:#FF0000;
}
表示abbr標簽是否有title屬性，如果有則應用這個樣式。
也可以用判斷html標簽的某個屬性值的方法來定義css
例如：
p[title='app']{ color:#FF0000;
}
這裡所有p標簽中，title屬性為app的都會應用這個樣式。
2總結
css3定義中有更多的選擇器類型，但由於各浏覽器支持不一，所以不推薦使用，在此不詳細敘述。