前段時間在寫網頁的時候，使用了css的偽元素:after來實現樣式，故而重溫了一下偽類和偽元素。平時實現的時候便是拿出來用，但是真正區分兩者的概念的時候卻有點混淆了。
首先，檢視一下w3s對偽類和偽元素的定義：
偽類：用於向某些選擇器新增特殊效果。
偽元素：向某些選擇器設定特殊效果。
對於我這種理解能力比較差的人來說，恕我直言，這兩句話貌似……這是乙個概念吧？
從這兩個概念，我們可以知道：1.二者都與選擇器有著密不可分的聯絡；2.「特殊」的效果……
特殊在何處？他們與類、元素之間有什麼關係呢？
偽類的種類：
通過偽類的種類分類，我們可以見得，偽類是基於元素的某種狀態下（如:hover等）或者元素存在某種特性的時候（如:lang等）發揮其作用的。偽類根據動態狀態來新增以實現樣式的動態變化。其功能與類相似，但是後者在文件中存在有class的靜態標誌，而偽類不存在於文件中，它屬於文件之外的抽象的類，故稱為偽類。（當元素處於某種狀態下時，假裝這裡有某個類)3*）
偽元素的種類：
從偽元素的分類中我們可以看出，偽類可以對元素的特定內容進行操作（如:first-letter等）。類似像文字的第乙個字母新增特殊樣式這種效果，在普通選擇器中是無法實現的（除非對文字中的第乙個字母新增標籤使其成為元素）。偽元素的控制內容與元素是一致的，但是偽元素不存在於文件中，是乙個抽象的元素，故稱為偽元素。
舉個例子（偽元素）：
使用偽元素：
angry birds
p:first-letter不使用偽元素達到以上效果：
angry birds!
.changecolor前者通過偽元素對元素內容進行操作，對於後者而言，是對元素的直接操作，二者效果是一致的。不過，偽元素不實際存在文件中。
css偽元素和偽類的區分
偽類用於向某些選擇器新增特殊的效果。偽元素用於將特殊的效果新增到某些選擇器。偽類有 first child link vistited，hover，active，focus，lang 偽元素有 first line，first letter，before，after 使用偽類 first secon...
偽元素 偽類
偽元素在dom中建立了一些抽象元素，而且這些元素本身時不存在與dom中的。在css3中偽元素前要使用 兩個冒號 比如 使用在使用 before 和 after時，要使用content進行內容設定。預設情況下，偽元素插入的內容為行內元素，不過可以使用display進行設定。注意 同時只能使用乙個偽元素...
偽類 偽元素
偽類和偽元素在web開發中用的好的話，可以說猶如神助。但一定要分清楚，什麼是偽類，什麼是偽元素。如何區分偽元素與偽類？答 偽元素在html文件渲染後，頁面中有相應的內容顯示，同時能夠設定它的樣式，而偽類只能設定樣式 偽元素和元素的區別？答 很明顯，從字面意思上來說，偽元素就不是真正的元素，而只有形而...