區別：1、偽類用於已有元素處於某種狀態時為其添加對應的樣式，而偽元素用於創建一些不在DOM樹中的元素並為其添加樣式；2、偽元素會建立一個文檔樹以外的元素，偽類別不會；3、偽元素使用雙冒號「::」表示，偽類別使用單冒號「:」表示。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
什麼是偽類別和偽元素
#提到「偽」字，你想到了什麼？ “假的”，“汪精衛偽政府”，“不存在的”······
偽類：用於已有元素處於某種狀態時（滑動、點擊等）為其添加對應的樣式，這個狀態是根據使用者行為而動態變化的。我的理解就是：本身不存在，只有在特定的情況（滑動、點擊）下才會被觸發的狀態，可以用css去修飾這個狀態下的物件。例如：當使用者懸停在指定元素時，可以透過:hover來描述這個元素的狀態，雖然它和一般css相似，可以為已有元素添加樣式，但是它只有處於DOM樹無法描述的狀態下才能為元素添加樣式，所以稱為偽類。
偽元素：用於建立一些不在DOM樹中的元素，並為其添加樣式。例如，我們可以透過:before來在一個元素之前添加一些文本，並為這些文本添加樣式，雖然用戶可以看見這些文本，但是它實際上並不在DOM文檔中。
偽類別與偽元素的差異：
請看下面範例：
範例一：
#<ul> <li>第一列</li> <li>第二列</li> </ul>
如果我們想要為第一列新增樣式，我們可以透過以下兩種方式：
（1）為第一列新增一個類，並在該類中定義樣式：
<ul>
<li class="first-item">第一列</li>
<li>第二列</li></ul>
</ul>
.first-item{color:orange;}（2）如果不用添加類別的方法，我們可以透過給第一個
<ul>
<li>第一个</li>
<li>第二个</li>
</ul>
li:first-child{color:orage;}例二：
<p>Hello World, and wish you have a good day!</p>
想要為該段落第一個字母添加樣式，可以有以下方法：
（1）給第一個字母包裹元素，並為span設定樣式：
<p>
<span class="first">H</span>ello World, and wish you have a good day!
</p>
.first{color:red;}（2）如果不建立元素，我們可以透過給 元素設定P:first-letter偽元素為其添加樣式，這時看起來像是創建了一個虛擬的span元素並為其添加樣式，但實際上在DOM數中並不存在這個span元素 從上述例子中我們可以看出：偽類的操作物件是文檔樹中已有的元素，而偽元素則建立了一個文檔樹外的元素。因此，偽類別與偽元素的差別在於：有沒有建立一個文檔樹以外的元素。 偽元素使用單冒號還是雙冒號？ css3規範中要求使用雙冒號（::）表示偽元素，以此來區分偽類和偽元素，例如::before和::after等偽元素使用雙冒號（::），:hover和:active偽類使用單冒號（:）。除了一些低於IE8版本的瀏覽器外，大部分瀏覽器都支援偽元素的雙冒號(::)表示方法。 然而除了少數偽元素如::backdrop必須使用雙冒號（::），大部分偽元素都支援單冒號和雙冒號的寫法，例如::after，寫成:after一樣可以正常運行。 w3c標準中說到，雖然CSS3標準要求偽元素使用雙冒號的寫法，但也依然支持單冒號的寫法。為了向後相容，我們建議你在目前還是使用單冒號的寫法。 常用偽類別有： :active 選擇正在被啟動的元素（符合指定狀態） :hover 選擇被滑鼠懸浮的元素（符合指定狀態） :link 選擇未存取的元素（符合指定狀態） #:visited 選擇已被存取的元素（符合指定狀態） :first-child 選擇滿足是其父元素的第一個子元素的元素 :lang(value) 選擇帶有指定lang 屬性的元素 :focus 選擇擁有鍵盤輸入焦點的元素 :enable 選擇每個已啟動的元素 :disable 選擇每個已禁止的元素 :checked 選擇每個被選取的元素 :target 選擇目前的錨點元素 :first-of-type 選擇滿足是其父元素的第一個某類型子元素的元素 :last-of- type 選擇滿足是其父元素的最後一個某類型子元素的元素 :only-of-type 選擇滿足是其父元素的唯一一個某類型子元素的元素 : nth-of-type(n) 選擇滿足是其父元素的第n個某類型子元素的元素 #:nth-last-of-type(n) 選擇滿足是其父元素的倒數第n個某類型的元素 :only-child 選擇滿足是其父元素的唯一子元素的元素 :last-child 選擇滿足是其父元素的最後一個元素的元素 :nth-child(n) 選擇滿足是其父元素的第n個子元素的元素 :nth-last-child(n) 選擇滿足是其父元素的倒數第n個子元素的元素 :empty 選擇滿足沒有子元素的元素 :in-range 選擇滿足值在指定範圍內的元素 :out-of-range 選擇值不在指定範圍內的元素 :invalid 選擇滿足值為無效值的元素 :valid 選擇滿足值為有效值的元素 :not(selector) 選擇不符合selector的元素 :optional 選擇為可選項的表單元素，即沒有「required」屬性 :read-only 選擇有"readonly"的表單元素 :read-write 選擇沒有"readonly"的表單元素 :root 選擇根元素 常用偽元素 ::first-letter 選擇指定元素的第一個單字 ::first-line 選擇指定元素的第一行 ::after 在指定元素的內容前面插入內容 ::before 在指定元素的內容後面插入內容 ::selection 選擇指定元素中被使用者選取的內容 （學習影片分享：css影片教學） 以上是css3的偽類和偽元素的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！<p>Hello World, and wish you have a good day!</p>
p:first-letter{color:red;}登入後複製
