一直被偽類與偽元素所迷惑，以為是同一個屬性名稱，這兩天看css動畫，越來越多的看到諸如   a:hover:after，a.hover:after 的用法，越來越糊塗，索性翻翻定義研究研究。

本文出現的偽類偽元素均為css2、css1中內容。css3中偽類、偽元素還未做整理。

先看定義：

偽元素：（pseudo-element）是HTML 中並不存在的元素。用於將特殊的效果新增到某些選擇器。

W3C：

以下是CSS3中對偽元素的描述：

偽元素的由兩個冒號::開頭，然後是偽元素的名稱 。

使用兩個冒號::是為了區別偽類和偽元素（CSS2中並沒有區別）。當然，考慮到相容性，CSS2中已存的偽元素仍然可以使用一個冒號:的語法，但是CSS3中新增的偽元素必須使用兩個冒號::

一個選擇器只能使用一個偽元素，並且偽元素必須處於選擇器語句的最後。

      從定義當中我們可以知道，偽元素原來在DOM結構中不存在的。偽元素建立了一個容器，這個容器不包含在DOM結構中，但是有內容，使用 “content”來新增內容，可以對其進行樣式的自定義，可以獲取其中的內容。為了規範，我們在偽元素前面加兩個冒號，比如::after，但是為了相容性，仍然使用了一個冒號的形式。

例如：  這是沒有新增偽元素的程式碼和網頁截圖。

當我在 .div1 之前加上:before之後，樣子是這樣：

可以看到，:before裡的內容新增在了相對.div1內容之前，同理，:after中的內容會出現在.div1 內容之後。當然如果對他們進行位置的設定，這種前後就只是一個說法上的區別了。

在我看來，:after 與:before的用處最大在於，可以減少html程式碼裡的節點個數及內容，優化程式碼閱讀。當我要在特定區間加入某些內容時，只用在css樣式表中利用:after與:before來輸入內容樣式，但更多的，可以結合偽類:hover 來設定動畫樣式。

這裡在提一點，如果我們利用偽元素來進行動畫設定，需要給父元素新增樣式{position：relative；}

另外，:after還有一個妙用，那就是清除浮動，給父元素追加:after之後，設定content：“ ”;clear:both;   就可以清除浮動，詳情還可以戳學習筆記---css中清除浮動的方法

  另外兩個相對於來說，更不常用，所以我也就沒有深究，用到再說吧~

下面看看偽類：

偽類：(pseudo-class）則應用於一組HTML 元素。用於向某些選擇器新增特殊的效果。

W3C：

      css3中定義：

         偽類存在的意義是為了通過選擇器找到那些不存在於DOM樹中的資訊以及不能被常規CSS選擇器獲取到的資訊。

偽類由一個冒號:開頭，冒號後面是偽類的名稱和包含在圓括號中的可選引數。

任何常規選擇器可以在任何位置使用偽類。偽類語法不區別大小寫。一些偽類的作用會互斥，另外一些偽類可以同時被同一個元素使用。

並且，為了滿足使用者在操作DOM時產生的DOM結構改變，偽類也可以是動態的。

從定義得知，偽類的作用是獲取頁面中不存在的資訊。比如<a></a> 標籤中的:linked :visited,這些內容不存在頁面當中，只能通過css選擇器來獲取。

且一個元素可以同時設定多個偽類效果。

其中，運用偽類最多的是<a></a>新增連結樣式。

a:link {color: #FF0000}		/* 未訪問的連結 */
a:visited {color: #00FF00}	/* 已訪問的連結 */
a:hover {color: #FF00FF}	/* 滑鼠移動到連結上 */
a:active {color: #0000FF}	/* 選定的連結 */

這裡要注意的是，這幾個偽類如果同時出現在一個元素的操作上，順序不能改變，否則很大程度上會產生紊亂，效果不生效。

最後來總結下偽類與偽元素的區別：

1.引用博主（@denied）的總結，偽類與偽元素的根本區別在於它們是否創造了新的元素(抽象)。

從我們模仿其意義的角度來看，如果需要新增新元素加以標識的，就是偽元素，反之，如果只需要在既有元素上新增類別的，就是偽類。

2.一個元素可以同時新增多個偽類，而每一次只能對一個偽元素進行操作。

3.書寫形式上的區別，單冒號是偽類，雙冒號是偽元素（但這點不能作為絕對區分的點）。
 

W3C：