僞類 僞元素 如何區分

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

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

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

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

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

　　從這兩個概念，咱們能夠知道：1.兩者都與選擇器有着密不可分的聯繫；2.「特殊」的效果……

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

　　僞類的種類：

　　

　　經過僞類的種類分類，咱們能夠見得，僞類是基於元素的某種狀態下（如:hover等）或者元素存在某種特性的時候（如:lang等）發揮其做用的。僞類根據動態狀態來添加以實現樣式的動態變化。其功能與類類似，可是後者在文檔中存在有class的靜態標誌，而僞類不存在於文檔中，它屬於文檔以外的抽象的類，故稱爲僞類。（當元素處於某種狀態下時，僞裝這裏有某個類)3*）

　　僞元素的種類：

　　

　　從僞元素的分類中咱們能夠看出，僞類能夠對元素的特定內容進行操做（如:first-letter等）。相似像文本的第一個字母添加特殊樣式這種效果，在普通選擇器中是沒法實現的（除非對文本中的第一個字母添加標籤使其成爲元素）。僞元素的控制內容與元素是一致的，可是僞元素不存在於文檔中，是一個抽象的元素，故稱爲僞元素。

　　舉個例子（僞元素）：

　　使用僞元素：

1	< p >Angry birds</ p >

p:first-letter {color: #00FF00;}

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

1 2 3

< p >        < span  class="changeColor">A</ span >ngry birds! </ p >

.changeColor {color:#00FF00;}

　　前者經過僞元素對元素內容進行操做，對於後者而言，是對元素的直接操做，兩者效果是一致的。不過，僞元素不實際存在文檔中。