css屬性：css偽類別和css偽元素的區別（附程式碼）

css偽元素和偽類對於剛學習css的同學來說可能會容易混淆，官方文件中解釋：CSS 偽類用於向某些選擇器添加特殊的效果，CSS 偽元素是用於將特殊的效果會加到某些選擇器。那麼，css偽元素和偽類的差別究竟在哪？本文將給大家細細的說說。

首先可以明確兩點，第一：兩者都與選擇器相關，第二：就是添加一些「特殊」的效果。這裡特殊指的是兩者描述了其他 css 無法描述的東西。

偽類別類型

#:active:focus:hover:link:visited將特殊樣式加入到被訪問過的連結:first-child將特殊樣式加入元素的第一個子元素:lang

偽類別	作用
將樣式加入到已啟動的元素
將樣式加入到被選取的元素
當滑鼠懸浮在元素上方時，向元素添加樣式
將特殊樣式加入到未被造訪過的連結

#允許創造者來定義指定的元素中使用的語言

偽元素類型#偽元素：first-letter：first=line將特殊樣式加入文字的首行：before：after

#作用
#將特殊樣式加入文字的首字母
在某元素之前插入某些內容

######在某元素之後插入某些內容######### ####

區別

這裡用偽類別 :first-child 和偽元素 :first-letter 來比較。

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

//偽類: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-偽類別與偽元素_html/css_WEB-ITnose

CSS 屬性: before && :after的用法，偽類別和偽元素的區別_html/css_WEB-ITnose

什麼是CSS偽元素？ CSS偽元素用法詳解

以上是css屬性：css偽類別和css偽元素的區別（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！