作為一個CSS3初學不久者來說，很容易混淆單冒號（:）和雙冒號（::）的用法，以為兩者可以互換著來使用。我自己之前也混淆過他們，因為兩者看起來太相像了，就像孿生兄弟。但實際上，他們的區別還是挺大的，最多算得上近房親戚。
下面我們來開始講講單冒號（:）偽類和雙冒號（::）偽元素有什麼相同和不同點（另外在CSS2中單冒號“:” 也叫做偽物件，具體可看看http://www.mb5u.com/tool/css2/）
單冒號（:）早在CSS中已經存在了，相信用慣CSS的碼農肯定對:hover偽類並不陌生。另外還有幾個比較實用的偽類，例如：
與連結訪問有關的 :link(未被點選過的連結)，:visited（連結已被點選訪問過）
與鍵盤輸入有關的 :focus(獲得鍵盤輸入焦點)
其他像 :lang偽類，:first-child偽類，大家可以自行到W3C官網看看具體用法，在這裡我就不贅述了。特別說一下 :first-child偽類，這個偽類很有意思，不得不佩服制定規則的人的洞察力，CSS3出現了類似用法的偽類，為開發者提供了不少方便。
其實，偽類和偽元素在CSS中已經存在，而CSS3為了區分偽類和偽元素，偽元素採用雙冒號寫法。偽類和偽元素都對特定元素進行選擇，前者重在對元素狀態的描述，而後者更重在對元素本身的描述，這是偽類和偽元素內在的聯絡和區別。
一、CSS3偽類
CSS3偽類又分為兩類：狀態偽類和結構性偽類。
CSS3狀態偽類沿用了我們上面已經提及過的CSS中的:hover ，:link ，:visited 等偽類。另一方面CSS3中大幅增加狀態偽類，例如：
:first-child 選擇某個元素的第一個子元素；
:last-child 選擇某個元素的最後一個子元素；
:nth-child(index)根據數量選擇某個元素的一個特定子元素，括號中填寫索引值
:nth-of-type(index)根據型別選擇某個元素的一個特定子元素，這個偽類與:nth-child()最大的不同點就在於是按型別來選擇子元素的，而不是一股腦的什麼子元素都算在內。
給個例子吧：
html:
<div>
<span>這是數字1</span>
<span>這是數字2</span>
<p>這是數字3</p>
<p>這是數字4</p>
<div>
css:
div:nth-child（1）{color:blue;}
只會讓第一個span元素的顏色變藍
div:nth-of-type(2){color:red;}
則會使第二個span元素和第二個p元素的顏色都變紅，原因是把div的子元素分成了兩類，一類是span元素，另外一類是p元素。
二、CSS3偽元素
CSS中已經有的偽元素 :first-letter ，:first-line ，CSS2中新增的偽元素 :after ，:before
CSS3中將上面的4個偽元素的單冒號變成雙冒號，另外還新增了::selection偽元素。
下面來講講CSS3中這幾個偽元素的一些常見功能
(1)::first-letter和::first-line
:first-letter和:first-line分別對文字的第一個字母和第一行進行選擇，這個從英文直接翻譯過來是不難理解的，報刊上的第一個文字大寫處理就可以用::first-letter。下面重點談談另外幾個偽元素
（2）::before和::after
::before和::after後面經常跟著content，用於在css渲染中向元素的頭部或尾部新增內容。很關鍵的一點是新增的這些內容不會出現在DOM中，僅僅是作為css渲染層對元素進行修改。所以不要用::before或::after展示有實際意義的內容，而僅僅使用它們顯示修飾性內容，例如在文字前面加上icon圖示。至於怎麼新增和新增有什麼前提條件，又可以寫一篇文章了。下次有空再來寫寫這個用法。
關於相容性問題：
由於IE對CSS3的支援問題，所以在寫程式碼時也要注意一些小問題。如果只需要相容firefox、webkit、opera等瀏覽器，偽元素採用雙冒號的寫法是沒多大問題的，但是如果需要相容IE瀏覽器，那麼還是用單冒號的寫法比較穩妥。