前段時間在寫網頁的時候，使用了CSS的偽元素:after來實現樣式，故而重溫了一下偽類和偽元素。平時實現的時候便是拿出來用，但是真正區分兩者的概念的時候卻有點混淆了。

　　首先，查看一下W3S對偽類和偽元素的定義：

　　偽類：用于向某些選擇器添加特殊效果。

　　偽元素：向某些選擇器設置特殊效果。

　　對于我這種理解能力比較差的人來說，恕我直言，這兩句話貌似……這是一個概念吧？

　　從這兩個概念，我們可以知道：1.二者都與選擇器有著密不可分的聯系；2.“特殊”的效果……

　　特殊在何處？他們與類、元素之間有什么關系呢？

　　偽類的種類：

　　

　　通過偽類的種類分類，我們可以見得，偽類是基于元素的某種狀態下（如:hover等）或者元素存在某種特性的時候（如:lang等）發揮其作用的。偽類根據動態狀態來添加以實現樣式的動態變化。其功能與類相似，但是后者在文檔中存在有class的靜態標志，而偽類不存在于文檔中，它屬于文檔之外的抽象的類，故稱為偽類。（當元素處于某種狀態下時，假裝這里有某個類)3*）

　　偽元素的種類：

　　

　　從偽元素的分類中我們可以看出，偽類可以對元素的特定內容進行操作（如:first-letter等）。類似像文本的第一個字母添加特殊樣式這種效果，在普通選擇器中是無法實現的（除非對文本中的第一個字母添加標簽使其成為元素）。偽元素的控制內容與元素是一致的，但是偽元素不存在于文檔中，是一個抽象的元素，故稱為偽元素。

　　舉個例子（偽元素）：

　　使用偽元素：

<p>Angry birds</p> p:first-letter {color: #00FF00;}

　　不使用偽元素達到以上效果：

<p><span class="changeColor">A</span>ngry birds! </p> .changeColor {color:#00FF00;}

　　前者通過偽元素對元素內容進行操作，對于后者而言，是對元素的直接操作，二者效果是一致的。不過，偽元素不實際存在文檔中。

轉載于:https://www.cnblogs.com/zhengwin7/p/5237127.html

總結

以上是生活随笔為你收集整理的伪类 伪元素 如何区分的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。