css 僞類和僞元素剖析

一、出現背景

www.w3.org/TR/CSS2/sel…

In CSS 2.1, 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.

簡要來講：在css2.1中，樣式每每是根據文檔樹中的元素來進行選擇的，但在真實的 html 內容中，一些常見的場景沒法進行選擇定位，好比一段文本段落的第一行，沒有選擇器可以指向它，css引入僞對象的概念（僞類和僞元素），來容許選擇基於文檔樹以外的信息

二、僞類

僞類根據元素的名稱、屬性或內容之外的特徵對元素進行分類，原則上，這些特徵不能從文檔樹中推導出來。僞類能夠是動態的，由於當用戶與文檔交互時，元素可能得到或丟失僞類。 舉例：

• ele:hover：被鼠標hover的元素
• ele:active：被鼠標激活過的元素
• ele:first-child：第一個子元素

三、僞元素

用於選擇一些不在文檔樹中的「抽象」元素對象，從而能夠爲其添加樣式及內容 舉例

• ele::before是選擇元素的前置區域對象
• ele::selection是選擇對應元素被選的內容區域對象

四、僞元素使用單冒號仍是雙冒號？

css3規範中要求使用雙冒號(::)表示僞元素，以此來區分於僞類，好比::before和::after等僞元素使用雙冒號，:hover和:active等僞類使用單冒號，使用單冒號是爲了兼容以前的低版本瀏覽器，但在建議中仍是使用雙冒號表示僞元素。

五、相同點

• 僞類和僞元素都是選擇器
• 僞類和僞元素都是獨立於正常文檔樹以外的（因此是「僞造」）
• 僞類和僞元素選擇的對象其實都是基於文檔樹，雖然獨立於文檔樹，但沒有脫離文檔樹 — 巧婦難爲無米之炊！

六、不一樣點

• 僞類是爲了方便開發者選擇特定元素而設計的(好比被鼠標所hover的元素ele :hover)，僞類每每能選擇到具體的文檔樹元素。但僞元素選擇的不是具體的文檔樹元素，更多的是一個獨立於文檔樹的「抽象元素」，好比文本中的第一個字母(::first-letter)，文檔元素的前置區域元素(::before)

七、應用

Ant-design 組件庫中，經過爲對應的示例塊添加錨點來進行定位(ant.design/components/…)，當鼠標切到對應的錨點後，瀏覽器會出現對應的錨點連接#target-url，css 經過 ele:target 僞類來選擇對應的元素，對爲其添加樣式。

.code-box:target {
    border: 1px solid #1890ff;
}
複製代碼

參考：

• www.w3.org/TR/CSS2/sel…