僞元素和僞類的區別

W3C中僞類和僞元素的官方定義文檔：

In CSS 2, style is normally attached to an element based on its position in the document tree. This simple model is sufficient for many cases, but some common publishing scenarios may not be possible due to the structure of the document tree. For instance, in HTML 4 (see [HTML4]), no element refers to the first line of a paragraph, and therefore no simple CSS selector may refer to it.

CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.

Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element's content. CSS pseudo-elements allow style sheet designers to refer to this otherwise inaccessible information. Pseudo-elements may also provide style sheet designers a way to assign style to content that does not exist in the source document (e.g., the :before and :after pseudo-elements give access to generated content).

Pseudo-classes classify elements on characteristics other than their name, attributes or content; in principle characteristics that cannot be deduced from the document tree. Pseudo-classes may be dynamic, in the sense that an element may acquire or lose a pseudo-class while a user interacts with the document. The exceptions are ':first-child', which can be deduced from the document tree, and ':lang()', which can be deduced from the document tree in some cases.

Neither pseudo-elements nor pseudo-classes appear in the document source or document tree.

Pseudo-classes are allowed anywhere in selectors while pseudo-elements may only be appended after the last simple selector of the selector.

Pseudo-element and pseudo-class names are case-insensitive.

Some pseudo-classes are mutually exclusive, while others can be applied simultaneously to the same element. In case of conflicting rules, the normal cascading order determines the outcome.

翻譯：

在CSS2中，一般附加到元素上的樣式是基於它在文檔樹中的位置。在不少狀況下，這種簡單的模型就夠用了。可是因爲文檔樹的結構，一些常見的發佈方案可能並不能實現咱們想要的效果。例如，在HTML4(參見[HTML4])中，沒有元素引用[1]段落的第一行，所以沒有簡單的CSS選擇器能夠引用它。

/*[1]這裏的引用指元素標籤包含這些內容。*/

CSS引入了僞元素和僞類的概念，以容許基於文檔樹以外的信息格式化。

僞元素建立抽象概念，此抽象概念和文檔樹有關，但超出了文檔語言指定的概念。譬如，文檔語言不提供訪問元素的第一個字母或第一行內容的機制。CSS僞元素容許樣式表設計者來引用此其它方式沒法訪問的信息。僞元素還能夠爲樣式表設計者提供一種方式來分配樣式給源文檔中不存在的內容(例如，:before和:after僞元素提供對生成內容的訪問)。

僞類按照除了名稱、屬性或內容之外的特徵對元素分類;原則上來講，不能從文檔樹中推斷這些特徵。僞類能夠是動態的，從這個方面來講，當用戶與文檔交互時，一個元素能夠得到或丟失僞類。‘:first-child’和‘:lang()’是例外，‘:first-child’，它能夠從文檔樹中推斷出來，‘:lang()’在某些狀況下也能夠從文檔樹中推斷出來。

僞元素和僞類都不能出如今文檔源或文檔樹中。

選擇器的任何地方都容許使用僞類，而僞元素只能附加在最後一個簡單選擇器以後。

僞元素和僞類名稱不區分大小寫。

一些僞類是互斥的，而其餘僞類能夠同時應用於同一個元素。若是規則衝突，正常的級聯順序決定告終果。

僞元素(Pseudo-element)

僞元素是一個附加至選擇器末的關鍵詞，容許你對被選擇元素的特定部分修改樣式。

語法：

selector::pseudo-element {

property: value;

}

一個選擇器中只能使用一個僞元素。僞元素必須緊跟在語句中的簡單選擇器/基礎選擇器以後。

注意：按照規範，應該使用雙冒號(::)而不是單個冒號(:)，以便區分僞類和僞元素。可是，因爲舊版本的 W3C 規範並未對此進行特別區分，所以目前絕大多數的瀏覽器都同時支持使用這兩種方式來表示僞元素。

僞元素示例：

/* 改變段落首行文字的樣式 */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

 

僞元素本質上是建立了一個虛擬容器(元素)。

僞類(Pseudo-class)

CSS 僞類 是添加到選擇器的關鍵字，指定要選擇的元素的特殊狀態。

語法

selector:pseudo-class {

property: value;

}

相似於普通的類，你能夠在一個選擇器中同時一塊兒寫多個僞類。

參考文獻：

僞類和僞元素相關定義和使用的W3C官方文檔：https://drafts.csswg.org/css2/selector.html#x22