前言

目前為止，我們已經學習瞭如何使用HTML文件中定義的元素選擇文件的內容。CSS中還定義了偽選擇器，它們提供了更復雜的功能，但非直接對應HTML文件應以的元素。偽選擇器主要分兩種：偽元素和偽類。

偽元素選擇器

該類選擇器主要用於向指定的選擇器新增指定的效果。

：first-letter

選擇“塊級元素”文字段落中的首個字元，只能對“塊級元素”生效。

該選擇器可以設定的值有：

• font屬性

• color屬性

• background屬性

• margin屬性

• padding屬性

• border屬性

• text-decoration屬性

• vertical-align屬性

• text-transform屬性

• line-height屬性

• float屬性

• clear屬性

使用示例如下：

p: first-letter {
    border: 2px solid black;
    color: blue;
    border-radius: 5px;
    padding: 5px;
}

：first-line

選擇“塊級元素”文字段落中的首行文字，只能對“塊級元素”生效。

該選擇器可以設定的值有：

• font屬性

• color屬性

• background屬性

• word-spacing屬性

• letter-spacing屬性

• text-decoration屬性

• vertical-align屬性

• text-transform屬性

• line-height屬性

• clear屬性

使用示例如下：

p: first-line {
    border: 2px solid black;
    letter-spacing: 5px;
    color: blue;
}

：before

在指定的選擇器之前插入一段內容。插入的內容預設為“行內元素”，可以通過“display”強制轉換顯示型別。

程式碼示例：

/*插入文字*/
p:before {
    content: "插入文字";
    color: red;
}

/*插入圖片*/
div:before {
    content
 
: url(../img.jpg);
    width: 100px;
    height: 100px;
}

：after

在指定的選擇器之後插入一段內容，使用方式和“:before”一樣。插入的內容預設也是為“行內元素”，同樣可以通過“display”強制轉換顯示型別。程式碼示例同“:before”。

提示：使用“:before”和“:after”偽元素選擇器不僅能為指定的元素新增文字、圖片和各種利用“width”、“height”、“border”製作出來的形狀，甚至還能新增音訊、視訊這些多媒體檔案，而且具有高度自定義性。

偽類選擇器

偽類選擇器和其它選擇器有所不同，它是通過觸發一定的“事件”來實現效果，也就是說如果不進行任何操作是看不到該選擇器的CSS樣式設定的。

動態偽類選擇器

之所以稱為動態偽類選擇器，是因為它們根據條件的改變匹配元素，是相對於文件的固定狀態來說的。隨著JavaScript廣泛用於修改文件內容和元素狀態，動態選擇器和靜態選擇器之間的界限越來越模糊，不過，動態偽類選擇器仍然是一類比較特別的選擇器。

：link 和：visited 選擇器

：link選擇器匹配超連結，：visited選擇器匹配使用者已經訪問過得超連結。

使用：visited選擇器可以應用到連結元素的屬性不多。你可以改變顏色和字型，不過僅此而已。

提示：：visited選擇器匹配使用者在所有頁面訪問過的href屬性為URL的任意連結，而不只是你的頁面。：visited最常見的用法就是針對已訪問的連結應用某種樣式，從而讓它們跟未訪問的連結有所區別。比如我們看新聞，看過的新聞和沒有看過的新聞在首頁列表呈現的狀態是不一樣的，便於我們區分。

：hover 選擇器

：hover選擇器匹配使用者滑鼠懸停在其上的任意元素。

：active 選擇器

：active選擇器匹配當前被使用者啟用的元素（一般情況下為滑鼠點選該元素）。

：focus 選擇器

：focus選擇器匹配獲得焦點的元素，常用於 input 元素。

結構性偽類選擇器

使用結構性偽類選擇器能夠根據元素在文件中的位置選擇元素。這類選擇器都有一個冒號字元字首（：），例如：empty。他們可以單獨使用，也可以跟其他選擇器組合使用，如p：empty。

使用：root 選擇器（根元素選擇器）

：root 選擇器匹配文件中的根元素。它可能是用得最少的一個偽類選擇器，因為總是返回html元素，一般不用。

使用子元素選擇器

使用子元素選擇器匹配直接包含在其他元素中的單個元素。下方列表簡單的總結了這類選擇器：

使用nth-child選擇器

：nth-child選擇器跟上一節講的子元素選擇器類似，但使用這類選擇器可以制定一個索引以匹配特定位置的元素。下方列表簡單的總結了這類選擇器：

UI元素狀態偽類選擇器

使用UI偽類選擇器可以根據元素的狀態匹配元素，下方列表將簡單總結這類選擇器：