css 引入偽類和偽元素的概念是為了實現基於文件樹之外的資訊的格式化
偽類用於向某些選擇器新增特殊的效果。
偽類選擇元素基於的是當前元素處於的狀態，或者說元素當前所具有的特性，而不是元素的id、class、屬性等靜態的標誌。由於狀態是動態變化的，所以乙個元素達到乙個特定狀態時，它可能得到乙個偽類的樣式；當狀態改變時，它又會失去這個樣式。由此可以看出，它的功能和class有些類似，但它是基於文件之外的抽象，所以叫偽類。
偽元素用於將特殊的效果新增到某些選擇器。
與偽類針對特殊狀態的元素不同的是，偽元素是對元素中的特定內容進行操作，它所操作的層次比偽類更深了一層，也因此它的動態性比偽類要低得多。實際上，設計偽元素的目的就是去選取諸如元素內容第乙個字（母）、第一行，選取某些內容前面或後面這種普通的選擇器無法完成的工作。它控制的內容實際上和元素是相同的，但是它本身只是基於元素的抽象，並不存在於文件中，所以叫偽元素。
可以明確兩點，第一兩者都與選擇器相關，第二就是新增一些「特殊」的效果。這裡特殊指的是兩者描述了其他css無法描述的東西。
偽元素和偽類之所以這麼容易混淆，是因為他們的效果類似而且寫法相仿，但實際上css3為了區分兩者，已經明確規定了偽類用乙個冒號來表示，而偽元素則用兩個冒號來表示。
偽類和偽元素的根本區別在於：它們是否創造了新的元素(抽象)。
但因為相容性的問題，所以現在大部分還是統一的單冒號，但是拋開相容性的問題，我們在書寫時應該盡可能養成好習慣，區分兩者。
偽類與偽元素的區別
w3c關於偽類偽元素的定義 種類firsti second i p p i first child 效果 如何模擬上述效果?新增類 class first child firsti second i p first child 再看偽元素的效果及模擬 hello world p p first le...
偽類與偽元素的區別
詳解偽類與偽元素推薦 偽類與偽元素的區別 偽類本質上是為了彌補常規css選擇器的不足，以便獲取更多的資訊。偽元素本質上是建立乙個有內容的虛擬容器。css3中偽類和偽元素語法不同。偽類 link hover 偽元素 before after 可以同時使用多個偽類，卻只能同時使用乙個偽元素。其中偽元素和...
偽元素與偽類的區別
偽類和偽元素的異同 css selectors level 3 該規範中為偽類和偽元素做了區分，偽類使用單冒號，偽元素開始使用雙冒號。比如偽類 first child 偽元素 first line first letter before after css 3在css2.1的基礎上增加了不少偽類 t...