僞類與僞元素

僞類 - pseudo classes

首先看看CSS2中對僞類的定義：

CSS 僞類用於向某些選擇器添加特殊的效果

CSS3對僞類的定義：

僞類存在的意義是爲了經過選擇器找到那些不存在與DOM樹中的信息以及不能被常規CSS選擇器獲取到的信息。

僞類由一個冒號:開頭，冒號後面是僞類的名稱和包含在圓括號中的可選參數。

任何常規選擇器能夠再任何位置使用僞類。僞類語法不區別大小寫。一些僞類的做用會互斥，另一些僞類能夠同時被同一個元素使用。而且，爲了知足用戶在操做DOM時產生的DOM結構改變，僞類也能夠是動態的。

僞類的功能有兩種：

1. 獲取不存在與DOM樹中的信息。好比<a>標籤的:link、visited等，這些信息不存在與DOM樹結構中，只能經過CSS選擇器來獲取；
2. 獲取不能被常規CSS選擇器獲取的信息。好比僞類:target，它的做用是匹配文檔(頁面)的URI中某個標誌符的目標元素。

僞元素 - Pseudo-elements

CSS2中對僞元素的定義：

CSS 僞元素用於向某些選擇器設置特殊效果。

CSS3中僞元素的定義：

僞元素在DOM樹中建立了一些抽象元素，這些抽象元素是不存在於文檔語言裏的（能夠理解爲html源碼）。好比：documen接口不提供訪問元素內容的第一個字或者第一行的機制，而僞元素可使開發者能夠提取到這些信息。而且，一些僞元素可使開發者獲取到不存在於源文檔中的內容（好比常見的::before,::after）。

僞元素的由兩個冒號::開頭，而後是僞元素的名稱。

使用兩個冒號::是爲了區別僞類和僞元素（CSS2中並無區別）。固然，考慮到兼容性，CSS2中已存的僞元素仍然可使用一個冒號:的語法，可是CSS3中新增的僞元素必須使用兩個冒號::。

一個選擇器只能使用一個僞元素，而且僞元素必須處於選擇器語句的最後。

注：不排除將來會加入同時使用多個僞元素的機制。

一樣，第一段話是僞元素的清晰定義，也是僞元素與僞類最大的區別。簡單來講，僞元素建立了一個虛擬容器，這個容器不包含任何DOM元素，可是能夠包含內容。另外，開發者還能夠爲僞元素定製樣式。

以::first-line爲例，它獲取了指定元素的第一行內容而且將第一行的內容加入到虛擬容器中。若是經過JavaScript來實現這個邏輯，那麼要考慮的因素就太多了，好比制定元素的寬度、字體大小，甚至浮動元素的圖文混排等等。固然，這些問題確實是能夠用JavaScript來解決的，可是相對於::first-line簡簡單單的幾個字，用JavaScript恐怕不止這些吧！

總結一下僞類與僞元素的特性及其區別：

1. 僞類本質上是爲了彌補常規CSS選擇器的不足，以便獲取到更多信息；
2. 僞元素本質上是建立了一個有內容的虛擬容器；
3. CSS3中僞類和僞元素的語法不一樣；
4. 能夠同時使用多個僞類，而只能同時使用一個僞元素；