一條CSS規則包含兩個部分：選擇器和宣告塊，其中選擇器決定了宣告塊中的CSS樣式，掌握選擇器的用法是掌握CSS的基礎之一。CSS中的選擇器基本可以分為以下幾種型別：元素選擇器、關係選擇器、屬性選擇器、偽類選擇器和偽元素選擇器：

一、CSS選擇器

元素選擇器：元素選擇器是應用最多的一類選擇器，元素選擇器包括，

[1]元素選擇器：以元素的標籤名稱作為選擇器，例如：div{}，h2{}

[2]ID選擇器：以元素的id屬性作為選擇器，例如一個標籤為：<div id="first"></div>，那麼對這個元素使用ID選擇器為:#first{}

[3]類選擇器：以元素的class屬性作為選擇器，例如一個標籤為：<div class="demo"></div>，那麼對這個元素使用ID選擇器為:.demo{}

[4]萬用字元選擇器：應用於所有元素的選擇器： *{}， 一般情況下萬用字元選擇要慎用

關係選擇器：關係選擇器即利用元素之間的關係進行篩選，關係選擇器主要包括：

後代選擇器：E F ，所有被E包含的F元素，即所有作為E元素後代的F元素

子選擇器：E>F，所有作為E元素的子元素的F元素，與後臺選擇器不同，子選擇器限定必須是父元素的子元素才符合要求。IE6不支援子選擇符

相鄰選擇器：E+F，緊鄰在E元素之後的F元素，F與E元素必須是同級元素。IE6不支援

兄弟選擇器：E~F，E元素之後的所有兄弟F元素。IE6不支援

屬性選擇器：屬性選擇器即利用元素的屬性或者屬性值來決定樣式應用於哪些元素， 屬性選擇器既可以根據有無對應屬性來篩選，也可以根據屬性值來篩選。IE6及以下的版本不支援屬性選擇器

E[attr]：選擇具有屬性attr的元素

E[attr='val']：具有屬性attr且屬性值為val的元素

E[attr^='val']：具有屬性attr且屬性值以val開頭的元素

E[attr$='val']：具有屬性attr且屬性值以val結尾的元素

E[attr*='val']：具有屬性attr且屬性值包含val的元素

E[attr|='val']：具有屬性attr且屬性值以val開頭並且用“-”分隔的元素

E[attr~='val']：具有屬性attr且屬性值以空格分隔，其中一個值為val的元素

偽類選擇器：偽類選擇器最常用的就是關於連結的偽類了，比如link，visited等，CSS3中又增添了一些新的偽類選擇器。

首先看連結偽類：

a:link：設定超連結a在未被訪問前的樣式。

a:visited：設定超連結a在其連結地址已被訪問過時的樣式

動態偽類：

E:hover：設定元素在滑鼠懸停時的樣式

E:active：設定元素在被啟用(在滑鼠點選與釋放之間)時的樣式

E:focus： 設定元素在取得焦點後的樣式

注意點：

[1]對於錨點類的偽類，設定時需要注意設定的順序，即：link->visited->hover->active，如果順序不對可能會帶來意想不到的錯誤。

[2]對於hover偽類，IE6只支援連結元素a 的hover，IE6-7不支援:active和:focus偽類

UI元素狀態偽類：

E:empty：匹配沒有任何子元素的E元素。

E:enabled：匹配介面上處於可用狀態的元素E。

E:disabled：匹配介面上處於不可用狀態的元素E。

E:checked：匹配介面上被選中的元素E(主要用於input type為radio與checkbox)

CSS3新增的偽類：

E:first-child：作為父元素的第一個子元素的E元素

E:last-child：作為父元素的最後一個子元素的E元素

E:nth-child(n)：父元素的第n個子元素

E:nth-last-child(n)：父元素的倒數第n個子元素

E:first-of-type：同類型中的第一個同級兄弟元素E

E:last-of-type：同類型中的第一個同級兄弟元素E

E:only-of-type：同類型中的唯一一個元素E

E:nth-of-type()：同類型中的第n個同級元素E

E:nth-last-of-type()：同類型中的倒數第n個同級元素E

IE6-8都不支援這些偽類選擇器。

偽物件選擇器：

E:first-letter/E::first-letter ：設定物件內第一個字元的樣式

E:first-line/E::first-line ：設定物件內第一行字元的樣式

注意點：IE6在使用該選擇符時有個顯式的BUG：選擇符與包含規則的花括號之間不能緊挨著，需留有空格或換行

E:befor/E:after：用來設定物件前、後的內容，與content屬性一起使用。IE6-8不支援

E:selection:設定物件被選中時的樣式，IE6，7都不支援。