什麼是偽類？
偽類是用來定義元素的一種特殊狀態。
例如，它可用於：
- 樣式元素時過它用戶將鼠標
- 風格和參觀訪問過的鏈接不同
- 風格元素，當它獲得焦點
鼠標懸停我
句法
偽類的語法：
selector:pseudo-class {
property:value;
}錨偽類
鏈接可以顯示在不同的方式：
例
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited
link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
試一試»  | 注意： a:hover必須出現在a:link和a:visited ！要想在CSS定義是有效的a:active必須出現在a:hover在CSS定義，以便有效！偽類名稱不區分大小寫。 |
|---|
偽類和CSS類
偽類可以與CSS類組合：
當你將鼠標懸停在該示例中的鏈接，它會改變顏色：
懸停在<div>
使用的例子:hover偽類上<div>元素：
CSS -的:first-child偽類
在:first-child偽類指定的元素是另一個元素的第一個子匹配。
比賽第<p>元素
在下面的例子中，選擇匹配任何<p>元素是所有元素的第一個孩子：
比賽第<i>中的所有元素<p>元素
在下面的例子中，選擇相匹配的第<i>中的所有元素<p>元素：
匹配所有<i>所有第一個子元素<p>元素
在下面的例子中，選擇匹配所有<i>中的元素<p>這是另一個元素的第一個子元素：
CSS -的:lang偽類
本:lang偽類允許定義不同語言的特殊規則。
在下面的例子， :lang定義了引號<q>的元素lang="no" ：
例
<html>
<head>
<style>
q:lang(no)
{
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q>
Some text.</p>
</body>
</html>
試一試» 
更多示例
加入不同風格的超鏈接
這個例子演示了如何將其他樣式添加到超鏈接。
使用:focus
這個例子演示了如何使用:focus偽類。
自測練習用！
所有的CSS偽類
| 選擇 | 例 | 舉例說明 |
|---|---|---|
| :active | a:active | 選擇活動鏈接 |
| :checked | input:checked | 選擇每個檢查<input>元素 |
| :disabled | input:disabled | 每一個選擇禁用<input>元素 |
| :empty | p:empty | 選擇每<p>沒有孩子的元素 |
| :enabled | input:enabled | 選擇每個已啟用<input>元素 |
| :first-child | p:first-child | 選擇每<p>元素是它的父的第一個孩子 |
| :first-of-type | p:first-of-type | 選擇每<p>元素，它是第一個<p>它的父元素 |
| :focus | input:focus | 選擇<input>元素具有焦點 |
| :hover | a:hover | 選擇了鼠標鏈接 |
| :in-range | input:in-range | 選擇<input>同的值的指定範圍內的元件 |
| :invalid | input:invalid | 選擇所有<input>具有無效值的元素 |
| :lang(language) | p:lang(it) | 選擇每<p>用lang屬性值開頭為“它”元素 |
| :last-child | p:last-child | 選擇每<p>元素是它的父的最後一個子 |
| :last-of-type | p:last-of-type | 選擇每<p>元素是最後<p>它的父元素 |
| :link | a:link | 選擇所有訪問過的鏈接 |
| :not(selector) | :not(p) | 選擇的每一個元素不是一個<p>元素 |
| :nth-child(n) | p:nth-child(2) | 選擇每<p>元素是它的父的第二個孩子 |
| :nth-last-child(n) | p:nth-last-child(2) | 選擇每<p>元素是它的父的第二個孩子，從最後一個子計數 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 選擇每<p>元素是第二<p>它的父元素，從最後一個子計數 |
| :nth-of-type(n) | p:nth-of-type(2) | 選擇每<p>元素是第二<p>它的父元素 |
| :only-of-type | p:only-of-type | 選擇每<p>元素是唯一<p>它的父元素 |
| :only-child | p:only-child | 選擇每<p>元素是它的父的獨生子 |
| :optional | input:optional | 選擇<input>沒有元素"required"的屬性 |
| :out-of-range | input:out-of-range | 選擇<input>與值的元素在指定範圍之外 |
| :read-only | input:read-only | 選擇<input>帶元素"readonly"屬性指定 |
| :read-write | input:read-write | 選擇<input>沒有元素"readonly"屬性 |
| :required | input:required | 選擇<input>與元素"required"指定屬性 |
| :root | root | 選擇文檔的根元素 |
| :target | #news:target | 選擇當前活躍#news元（點擊包含錨名的URL） |
| :valid | input:valid | 選擇所有<input>與一個有效的價值要素 |
| :visited | a:visited | 選擇所有訪問過的鏈接 |
所有CSS偽元素
| 選擇 | 例 | 舉例說明 |
|---|---|---|
| ::after | p::after | 每一個後面插入內容的<p>元素 |
| ::before | p::before | 每前插入內容<p>元素 |
| ::first-letter | p::first-letter | 每次選擇的第一個字母<p>元素 |
| ::first-line | p::first-line | 選擇每第一行<p>元素 |
| ::selection | p::selection | 選擇由用戶選擇的一個元件的一部分 |