CSS3中增加的偽類有哪些及其作用是什嗎？

本篇文章給大家帶來的內容是關於CSS3中增加的偽類有哪些及其作用是什嗎？有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

1. 偽類與虛擬元素

CSS偽類：用於向某些選取器添加特殊的效果。

CSS虛擬元素：用於將特殊的效果添加到某些選取器。虛擬元素代表了某個元素的子項目，這個子項目雖然在邏輯上存在，但卻並不實際存在於文檔樹中。

虛擬元素	作用
::first-letter	將樣式添加到文本的首字母
::first-line	將樣式添加到文本的首行
::before	在某元素之前插入某些內容
::after	在某元素之後插入某些內容

偽類的效果可以通過添加一個實際的類來達到，而虛擬元素的效果則需要通過添加一個實際的元素才能達到，這也是為什麼他們一個稱為偽類，一個稱為虛擬元素的原因。

CSS3為了區分偽類和虛擬元素，已經明確規定了偽類用一個冒號來表示，而虛擬元素則用兩個冒號來表示。但因為相容性的問題，所以現在大部分還是統一的單冒號，但是拋開相容性的問題，我們在書寫時應該儘可能養成好習慣，區分兩者。

單冒號(:)用於CSS3偽類，雙冒號(::)用於CSS3虛擬元素。虛擬元素由雙冒號和虛擬元素名稱組成。不過瀏覽器需要同時支援舊的已經存在的虛擬元素寫法，比如:first-line、:first-letter、:before、:after等，而新的在CSS3中引入的虛擬元素則不允許再支援舊的單冒號的寫法。

2、CSS3新增偽類

新增偽類	作用
p:first-of-type	選擇屬於其父元素的首個<p>元素的每個<p>元素。
p:last-of-type	選擇屬於其父元素的最後<p>元素的每個<p>元素。
p:only-of-type	選擇屬於其父元素唯一的<p>元素的每個<p>元素。
p:only-child	選擇屬於其父元素唯一的子項目的每個<p>元素。
p:nth-child(n)	選擇屬於其父元素的第n個子項目的每個<p>元素。
p:nth-last-child(n)	選擇屬於其父元素的倒數第n個子項目的每個<p>元素。
p:nth-of-type(n)	選擇屬於其父元素第n個<p>元素的每個<p>元素。
p:nth-last-of-type(n)	選擇屬於其父元素倒數第n個<p>元素的每個<p>元素。
p:last-child	選擇屬於其父元素最後一個子項目的每個<p>元素。
p:empty	選擇沒有子項目的每個<p>元素（包括文本節點）。
p:target	選擇當前活動的<p>元素。
:not(p)	選擇非<p>元素的每個元素。
:enabled	控製表單控制項的可用狀態。
:disabled	控製表單控制項的禁用狀態。
:checked	單選框或複選框被選中。

偽類	作用
:hover	將樣式添加到滑鼠懸浮的元素
:active	將樣式添加到被啟用的元素
:focus	將樣式添加到獲得焦點的元素
:link	將樣式添加到未被訪問過的連結
:visited	將樣式添加到被訪問過的連結
:first-child	將樣式添加到元素的第一個子項目
:lang	定義指定的元素中使用的語言