CSS偽類和偽元素的區別

偽類別和偽元素皆獨立於文件結構。它們取得元素的途徑也不是基於id、class、屬性這些基礎的元素特徵，而是在處於特殊狀態的元素（偽類），或是元素中特別的內容（偽元素）。差異總結如下：

CSS伪类 (Pseudo-classes)：用于向某些选择器添加特殊的效果，即在元素当前静态样式的基础上添加特殊效果（一般都是动态效果），所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。

屬性	#描述
:active	為已啟動的元素加入樣式
:focus	為擁有鍵盤輸入焦點的元素新增樣式
:hover	當滑鼠懸浮在元素上方時，向元素新增樣式
:link	向未被存取的連結新增樣式
#:visited
:visited
:visited	已被造訪的連結新增樣式

:first-child#為元素的第一個子元素新增樣式

:lang用於為某些選擇器設定特殊效果，是對元素中的特定內容進行設定和操作，。

	為具有指定lang屬性的元素新增樣式
备注：在 CSS 定义中，同一个元素的 :hover 必须位于 :link、:visited 之后才能生效，:active 必须位于 :hover 之后才能生效。  css偽元素 (Pseudo-elements)：	操作層次比偽類更深，故動態性比偽類要差
屬性	描述
:first-letter	在文字的第一個字母中加入特殊樣式
:first-line	在文字的首行中加入特殊樣式

:before<a href="http://www.php.cn/wiki/1550.html" target="_blank"></a>在元素之前加入內容

• ##:after

  在元素之後加入內容

•  

  #w3c

 對兩者的定義：

##CSS 偽類別用於為某些選擇器新增特殊的效果。

CSS 偽元素用於將特殊的效果新增至某些選擇器。

區別

這裡用偽類 :first-child
 和偽元素 

:first-letter

 來比較。 <pre class="brush:php;toolbar:false">p&gt;i:first-child {color: red}&lt;p&gt;     &lt;i&gt;first&lt;/i&gt;     &lt;i&gt;second&lt;/i&gt;&lt;/p&gt;</pre> //偽類 :first-child 添加樣式到第一個子元素
如果我們不使用偽類，而希望達到上述效果，可以這樣做：

.first-child {color: red}<p>
    <i>first</i>
    <i>second</i></p>

即我們為第一個子元素新增一個類，然後定義這個類別的樣式。那我們接著看看偽元素：

p::first-letter {color: red}<p>I am stephen lee.</p>

//偽元素 ::first-letter 添加樣式到第一個字母

那麼如果我們不使用偽元素，要達到上述效果，該怎麼做呢？

.first-letter {color: red}<p><span>I</span> am stephen lee.</p>

即我們為第一個字母加上一個 

span，然後為 span

 增加樣式。

兩者的差別已經出來了。那就是：

#########偽類的效果可以透過添加一個實際的類別來達到，而偽元素的效果則需要透過添加一個實際的元素才能達到，這也是為什麼他們一個稱為偽類，一個稱為偽元素的原因。 ############總結######偽元素和偽類之所以這麼容易混淆，是因為他們的效果類似而且寫法相仿，但實際上 ###css3###為了區分兩者，已經明確規定了偽類用一個冒號來表示，而偽元素則用兩個冒號來表示。 ###

:Pseudo-classes
::Pseudo-elements

###但因為相容性的問題，所以現在大部分還是統一的單冒號，但是拋開相容性的問題，我們在書寫時應該盡可能養成好習慣，區分兩者。 ###

以上是CSS偽類和偽元素的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！