們對CSS的以下3種主要的選擇器已經非常熟悉：

• 通用標簽：CSS代碼中的 p 用來選擇HTML元素 <p>。

• 類（classes）： CSS代碼中的 .intro 用來選擇帶有屬性 class="intro" 的HTML元素。

• ids：CSS代碼中的 #logo 用來選擇帶有屬性 id="logo" 的HTML元素。

所有這些選擇器都可以附加使用偽類（pseudo-classes）。一個偽類用來：

• 定義一個元素的特殊狀態，這個狀態往往和用戶的動態交互行為或文檔的動態結構化特征有關，因此不能提前寫入HTML文檔中。

• 是以冒號（colon） : 開始的一個關鍵詞。

語法

偽類不能單獨存在。它必須附加在一個選擇器上。偽類將只是定義那個選擇器的特殊狀態。語法看起來如下：

.selector:pseudo-class{ }

在選擇器和偽類中間沒有空格， between the selector and the pseudo-class, 以表示它們是連接在一起的。

:hover

一個常用的偽類是 :hover，用來給一個懸停狀態（即用戶鼠標懸停在元素上時觸發的狀態）下的目標元素添加樣式。我們可以把這個偽類用于鏈接。因為懸停是最基本的鏈接交互動作。

a{ color: blue;}

a:hover{ color: red;}

第一行定義所有的 <a> 鏈接顏色為藍色。第二行定義當被懸停時，<a> 鏈接顏色為紅色。第二行選擇的是同樣的HTML元素，但是有特定的行為發生。(本例中是發生了用戶懸停動作）。

:visited

這個偽類的目標對象是被訪問過的鏈接。默認情況下，鏈接是藍色的，當被您訪問（點擊或觸摸）過后，變成紫色。

例子如下：

CSS代碼

a{ color: dodgerblue;}

a:visited{ color: rebeccapurple;}

HTML代碼：

<a >淘寶</a>

<a >百度</a>

<a >Mozilla</a>

<a >Techbrood</a>

這個樣式應用通常被開發者忽視，不過它有助于幫助用戶瀏覽一系列的結果鏈接（比如百度搜索結果頁），用戶可以很方便的知道哪些鏈接我已經訪問過，從而做出判斷是否要再次訪問以提高瀏覽效率。

:checked

:checked偽類是CSS3引入的一個很棒的狀態選擇器，用來表示選擇框（radio box、check box或options）的選中狀態。

有些讀者可能會有點疑問，我們在文檔中也可以放入初始狀態（如Section 17.2.1 of HTML4里面定義的selected或checked）。因此嚴格而言:checked偽類的確不完全是作用于文檔以外的信息，但其本質上是一個動態交互行為。

我們一樣通過一個在線實例來學習:checked偽類的使用，這是一個經典的純CSS手風琴導航欄，無須任何js腳本：

和:checked類似的和UI界面組件狀態有關的動態選擇器還有:enabled和:disabled，較少使用，這里不做更多介紹。

上面都是和元素狀態相關的偽類（Dynamic pseudo-classes），除此之外，我們經常使用的還有結構化偽類（Structural pseudo-classes），如:first-child等。

:first-child 和 :last-child

這兩個偽類和HTML元素層級關系有關。它們依據HTML元素在代碼中出現的順序來定位目標元素。我們可以把元素順序或層級關系看成是一種特殊的狀態。

<ul>

<li>One</li>

<li>Two</li>

<li>Three</li>

<li>Four</li>

</ul>

li:first-child{ background: greenyellow;}

li:last-child{ background: lightsalmon;}

可以看到，我們并沒有給第一個和最后一個 <li> 元素添加 class 屬性。 它們在文檔中的位置定義了CSS規則的應用。在這類例子中，我們可以通過給這些元素添加特定的類（class）來實現同樣的目的，這可以幫助我們理解為什么上述通過元素狀態或順序來選擇元素的CSS規則被稱為“偽類”。

如果我們再添加一條列表項，使用相同的CSS，樣式會被自動調整：

:nth-child

這個偽類是 :first-child 和 :last-child的通用版本，用來選擇第n個子元素。比如，如果你想選擇第2個子元素，你可以使用 :nth-child(2)：

li:nth-child(2){ background: violet;}

奇數和偶數（odd 和 even）

除了使用直接的數字外，:nth-child 還支持以奇偶數的方式來通配選擇子元素，這對于設置一些動態表格樣式有幫助。

• :nth-child(odd) 目標對象為所有的奇數子元素。

• :nth-child(even) 目標對象為所有的偶數子元素。

li:nth-child(odd){ background: gold;}

n遍歷器（iterator）

還有更為強大的選擇規則，:nth-child 支持基于 n 遍歷器關鍵詞的選擇計算方法。n 的取值從 0 開始。代表每n個元素進行遍歷。比如如果我們想選擇順序為3的倍數的所有子元素，可以使用如下的規則：

li:nth-child(3n){ background: hotpink;}

上例中，選擇了0（實際沒有）、3、6的列表項。這個例子中0沒有用，但是我們將看到n從0開始是必要的。

3n + 1

上面這個規則可以用來選擇目標元素為第一個以及隨后每隔開3個位置的子元素。

li:nth-child(3n+1){ background: limegreen;}

3n+1 規則包含2個部分：

• 3n 選擇順序為3的倍數的列表項。

• +1 在前面選擇的基礎上向后偏移1個位置。

可以看到，n遍歷器是非常靈活和強大的。

否定選擇器(:not)

否定選擇器和jQuery中的:not選擇器類似，是一個帶參數的函數式選擇器，語法如下：

*:not(FOO)

它表示除了符合FOO選擇條件的元素均被選中。比如我們想給列表項添加下邊線，但最后一條不加（以免和列表容器的邊線重復），此時就可以使用:not來實現：

li.item:not(:last-child) {border-bottom: 1px solid #dedede;}

注意否定選擇器不是結構化選擇器，有些網上教程比如慕課網上的描述是錯誤的。另外否定選擇器不能嵌套使用。

其它偽類

有很多可用的偽類，可以從這個鏈接查看完整列表：可用偽類列表，有一些的使用非常有限。最常用的就是我們上面討論過的這些。

SS3實現簡單圓滑的導航欄！效果：

實現代碼：

html：

css: