這一次，徹底搞定僞類和僞元素的差別

很多人經常對CSS中的僞類和僞元素分不清楚，或者将這兩者混為一談，今天讓我們來了解下這兩者都有哪些差別。在CSS3之前是沒有僞元素與僞類的差別的，直到CSS3才将這二者區分開來。

為什麼要引入僞類和僞元素？

CSS之是以要引入僞類和僞元素是為了格式化文檔樹之外的資訊，也就是說，僞類和僞元素是用來修飾不在文檔樹的部分，比如第一句話中的第一個字母或清單中的第一個元素。

什麼是僞類？

僞類表示的是被選擇元素的某種狀态,例如hover。

僞類的分類

狀态性僞類

狀态性僞類是根據元素目前的狀态進行選擇的，當元素進入某種狀态時呈現一種樣式，進入另一種狀态時呈現另一種樣式。

典型的狀态性僞類有：

• :link 應用與未被通路過的連結。
• :hover 應用于滑鼠懸停到的元素。
• :active 應用于被激活的元素。
• :visited 應用于被通路過的連結，與:link互斥。
• :focus 應用于擁有鍵盤輸入焦點的元素。

結構性僞類

CSS3新增選擇器，利用DOM樹進行元素過濾，通過文檔結構的互相關系來比對元素，能夠減少class和id屬性的定義，使得文檔結構更加簡潔。

典型的結構性僞類有下面的例子：

• div:first-child 選擇屬于其父元素的第一個子元素的每個div元素。
• div:last-child 選擇屬于其父元素最後一個子元素的每個div元素。
• div:nth-child(n) 選擇屬于其父元素的第n個子元素的每個div元素。

什麼是僞元素？

僞元素表示的是被選擇元素的某個部分，這個部分看起來像一個獨立的元素，例如::before和::after。

僞類和僞元素的差別

僞類是操作文檔中已有的元素，而僞元素則是建立了一個不在文檔樹中的元素，并為其添加樣式。