前言

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

一、偽元素選擇器

1）：first-letter 該類選擇器主要用於向指定的選擇器新增指定的效果。選擇“塊級元素”文字段落中的首個字元，只能對“塊級元素”生效。 首先，元素的display計算值必須是 block, inline-block, table-cell, list-item或者table-caption，其他所有display計算值都沒有用，包括display:table以及display:flex等。該選擇器可以設定的值有：

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;
}

2）：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;
}

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

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

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

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

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

二、偽類選擇器

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

1）動態偽類選擇器

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

（1）：link 選擇器匹配超連結， :visited選擇器匹配使用者已經訪問過的超連結

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

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

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

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

三、結構性偽類選擇器

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

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

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

• 選擇器說明：first-child 選擇元素的第一個子元素：last-child選擇元素的最後一個子元素：only-child選擇元素的唯一子元素：only-of-type選擇元素制定型別的唯一子元素

（3）：nth-child

• 選擇器跟上一節講的子元素選擇器類似，但使用這類選擇器可以制定一個索引以匹配特定位置的元素。下方列表簡單的總結了這類選擇器：
• 選擇器說明：nth-child（n） 選擇父元素的第n個子元素：nth-last-child 選擇父元素的倒數第n個子元素：nth-of-type（n） 選擇父元素定義型別的第n個子元素：nth-last-of-type（n） 選擇父元素定義型別的倒數第n個子元素

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

• 選擇器說明：enabled選擇啟用狀態的元素：disabled選擇禁用狀態的元素：checked選擇被選中的input元素（只用於單選按鈕和複選框）：default選擇預設元素：valid根據輸入驗證選擇有效或者無效的input元素：in-range/：out-of-range 選擇在制定範圍之內或者職位受限的input元素：required/：optional根據是否允許：required屬性選擇input元素