說說偽類與偽元素的不同

偽元素用來創建HTML文檔語言指定之外文檔樹的抽象層。比如HTML沒有提供文檔元素內容的首字母或第一行的訪問機制。CSS偽元素允許作者引用這些除此之外無法訪問的信息。偽元素還提供一種方法來引用不存在於文檔中的內容。（比如，::before 和 ::after ）。

一個偽元素由2個冒號（::）加上偽元素的名字所定義。

每個選擇器中只能出現一個偽元素，並且只能出現在選擇器主體的後面。

偽元素默認是inline樣式的，通過設置成絕對定位，可強制改變display為block，這樣對其設置寬高才能生效。

註意：後續版本可能會允許每個選擇器中出現多個偽元素。

從上面的定義，我們可以得知偽元素事實上創建了一個虛擬的元素，在這個虛擬元素上可以應用一般

偽元素實際上是1：選定（過濾）選擇器的指定元素的內容，把內容包裝到一個虛擬的容器中，並可以為該容器添加樣式。2:在選擇器指定的元素前後創建內容，該內容也包裝到一個虛擬的容器中，並不存在與文檔中，可以為容器添加樣式

偽類CSS中的類（class）是為了方便過濾（即選擇）元素，以給這類元素添加樣式，class是定義在HTML文檔樹中的。

但是這在一些情況下是不夠用的，比如用戶的交互動作（懸停、激活等）會導致元素狀態發生變化，

為此，CSS引入了偽類（pseudo-class）的概念用來支持根據文檔樹以外的信息來過濾元素的能力。

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

偽類是一個抽象類，本質上還是一個類，因此其主要作用仍然是用來選擇元素而後設定具體的樣式。

偽類的定義使用：單冒號加上名稱，如 mydiv:hover。

偽類實際上是1：獲取不存在與DOM樹中的信息。比如<a>標簽的:link、visited等，這些信息不存在與DOM樹結構中，只能通過CSS選擇器來獲取，偽類選擇元素的依據不是名稱、屬性或內容，而是根據特征（比如狀態或順序）。（:lang除外）2：不能被常規CSS選擇器獲取到的信息。:first-child;

前面一節和本節內容分別詳細講述了偽類和偽元素的使用，我們應該已經大致理解了兩者的異同點，這裏再總結一下：

兩者都不存在於HTML文檔樹中，都是為了支持依靠文檔樹之外的信息來進行格式化。

出於歷史兼容性原因，一些在CSS2.1規範之前引入的偽元素使用和偽類一樣的語法標記（單冒號:）。

偽類本質上和類相同，是用來選擇過濾HTML元素的。只不過偽類是按動態特征過濾，而不是名稱、屬性或內容。

偽元素本質上和元素相同，是已有元素的某個部分或新創建的補充元素。偽元素上可以應用偽類選擇器來過濾。

偽類可以出現在選擇器的任何地方，而偽元素只能添加在最後一個簡單選擇器之後。

說說偽類與偽元素的不同