| 屬性 | 描述 | CSS |
|---|---|---|
| :active | 向被激活的元素添加樣式。 | 1 |
| :focus | 向擁有鍵盤輸入焦點的元素添加樣式。 | 2 |
| :hover | 當鼠標懸浮在元素上方時，向元素添加樣式。 | 1 |
| :link | 向未被訪問的鏈接添加樣式。 | 1 |
| :visited | 向已被訪問的鏈接添加樣式。 | 1 |
| :first-child | 向元素的第一個子元素添加樣式。 | 2 |
| :lang | 向帶有指定 lang 屬性的元素添加樣式。 | 2 |
偽類專門用來表示元素的一種的特殊狀態
當我們需要為處在這些特殊狀態的元素設置樣式時, 就可以使用偽類
a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */
a:active {color: #0000FF} /* 選定的鏈接 */
:first-child 偽類
:first-child 偽類來選擇元素的第一個子元素
例子 1 - 匹配第一個 <p> 元素
在下面的例子中，選擇器匹配作為任何元素的第一個子元素的 p 元素：
<html> <head> <style type="text/css">p:first-child{ color: red; } </style> </head> <body><p>some text</p><p>some text</p> </body> </html>
例子 2 - 匹配所有 <p> 元素中的第一個 <i> 元素
在下面的例子中，選擇器匹配所有 <p> 元素中的第一個 <i> 元素：
<html> <head> <style type="text/css">p > i:first-child{ font-weight:bold; } </style> </head> <body> <p>some<i>text</i>. some <i>text</i>.</p> <p>some<i>text</i>. some <i>text</i>.</p> </body> </html>
例子 3 - 匹配所有作為第一個子元素的 <p> 元素中的所有 <i> 元素
在下面的例子中，選擇器匹配所有作為元素的第一個子元素的 <p> 元素中的所有 <i> 元素：
<html> <head> <style type="text/css">p:first-child i{ color:blue; } </style> </head> <body> <p>some<i>text</i>. some<i>text</i>.</p> <p>some <i>text</i>. some <i>text</i>.</p> </body> </html>
為p標簽中選中的內容使用樣式
可以使用::selection偽類
(具有瀏覽器兼容性問題)
-------------------------------------------------------
:first-child 可以選中第一個子元素
:last-child 可以最后一個子元素
:nth-child() 可以選中任意位置的子元素 , 該選擇器后面可以指定一個參數, 指定選定第幾個子元素
:nth-child(even) 選中偶數位置的子元素
:nth-child(odd) 選中奇數位置的子元素
可用於表格隔行變色
:first-of-type
:last-of-type
:nth-of-type
在當前類型的子元素中排列