關于兩者的區別，其實是很古老的問題。但是時至今日，由于各種網絡誤傳以及一些不負責任的書籍誤筆，仍然有相當多的人將偽類與偽元素混為一談，甚至不乏很多CSS老手。早些年剛入行的時候，我自己也被深深誤導，因為論壇里的帖子大多不關心這種概念的細微差別，即使有人出來說一句：“這兩個是不同的”，也只是被更多的帖子淹沒掉而已。所以覺得有必要寫下這些我所知的部分，這里著重寫的是為什么這兩者不同，以及一些平時容易錯過的細節。

無論是偽類還是偽元素，都屬于CSS選擇器的范疇。所以它們的定義可以在CSS標準的選擇器章節找到。分別是 CSS2.1 Selectors 和 CSS Selector Level 3，兩者都已經是推薦標準。
標準的定義

在CSS2.1里，5.10 Pseudo-elements and pseudo-classes 描述了這兩個概念的由來，它們是被一同提及的。但到了 Selector Level 3 里，它們就被分開到兩個小節里加以區分。但無論如何，偽類和偽元素的引入都是因為在文檔樹里有些信息無法被充分描述，比如CSS沒有“段落的第一行”之類的選擇器，而這在一些出版場景里又是必須的。用標準里的話說：
CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.
簡單翻譯一下，就是：
CSS 引入偽類和偽元素的概念是為了實現基于文檔樹之外的信息的格式化
這么說很抽象，其實就是為了描述一些現有CSS無法描述的東西。缺少什么，則引入什么，不管是標準，還是人，都是如此成長而來。

偽類與偽元素的區別
這里我大可以列一個表格，把所有的偽類和偽元素分開羅列，但這未免太形式化，與其記住“哪些是哪些不是”，不如真正地加以區分。偽類和偽元素本身就有一個根本的不同之處，這點直接體現在了標準的描述語句上。
先看一個偽元素 first-line 例子。現在有一段HTML，內容是一個段落：

<p>I am the bone of my sword. Steel is my body, and fire is my blood.
I have created over a thoustand blades.
Unknown to Death.Nor known to Life. Have withstood pain to create many weapon.
Yet, those hands will never hold anything. So as I pray, unlimited blade works.</p>

如果我要描述這個段落的第一行，在不用偽元素的情況下，我會怎么做？想來我一定要嵌套一層 span，然后加上類名:

復制代碼代碼如下:
<p><span class=”first-line”>I am the bone of my sword. Steel is my body, and fire is my blood. </span>
I have created over a thoustand blades.
Unknown to Death.Nor known to Life. Have withstood pain to create many weapon.
Yet, those hands will never hold anything. So as I pray, unlimited blade works.</p>