CSS中偽類別與偽元素的概念是很容易混淆的
今天就來談談偽類與偽元素的差異
首先先來看看偽類別與偽元素的定義
w3c中對於它們是這麼解釋的
偽類：用於為某些選擇器新增特殊的效果
偽元素：用於將特殊的效果新增至某些選擇器
講道理，可能我語文不好，我覺得這兩句話是等價的:-)
根本不能看出有什麼區別
都是對某些選擇器「加特技」
標準有這麼一句話翻譯過來是這樣的
這話更抽象，其實意思就是對那些我們不能透過class、id等選擇元素的補充
這個差異我們需要一個例子來理解
<p>
<em>This</em>
<em>is a text</em></p>
#如果我們想要第一個em標籤字體顏色變紅怎麼做呢
使用我們熟悉的偽類別很簡單
em:first-child { color: red;}
但是如果不存在偽類別我們怎麼做呢
這是我們就需要為第一個em標籤添加類別
<p>
<em class="first-child">This</em>
<em>is a text</em></p>em.first-child { color: red;}可以實現同樣的效果
<p>
<em>This</em>
<em>is a text</em></p>還是這個例子
現在我想讓這個段落的第一個字母變紅
怎麼做呢
這回我們需要使用偽元素
p::first-letter { color: red;}
同樣假設偽元素不存在的情況
這時我們只能嵌套span標籤來實現
<p>
<em><span>T</span>his</em>
<em>is a text</em></p>p span { color: red;}看到這裡，相信大家已經清楚了為什麼一個叫做偽類，一個叫做偽元素
偽類的效果可以透過添加實際的類來實現
偽元素的效果可以透過加入實際的元素來實現
它們的本質差異就是是否抽象創造了新元素
偽類別最開始的時候只是用來表示元素的動態（典型的錨偽類link、visited、hover、active）
在CSS2標準中對它進行了擴展讓它雖然邏輯存在但不需要在DOM樹中標識
偽元素代表了某個元素的子元素，雖然邏輯存在，但不存在於DOM樹
雖然它們的概念很容易被我們混淆
但是也不影響我們正常使用
我在CSS3選擇器介紹及用法總結中說過
偽類只能使用“：”
而偽元素既可以使用“:”，也可以使用“::”
這裡我就解釋一下為什麼
CSS3中的標準是偽類使用單冒號“:”
而偽元素使用雙冒號“::”（避免混淆）
但是在此之前無論是偽類還是偽元素都使用單冒號“:”
所以為了確保兼容偽元素兩種使用方法都是可以的
但是低版本IE有雙冒號兼容問題
所以以前編寫樣式的人們對於偽類和偽元素就乾脆統統使用單冒號
導致這種混淆一直延續下來
#在使用偽類和偽元素的時候
有一點要特別注意
偽類別就像真正的類別一樣，可以疊加使用
沒有數量上限，只要不是互斥的
比如這樣
em:first-child:hover { color: red;}這是完全可以的
但注意，這裡是「與」的關係
也就是說既要滿足「first-child」第一個子元素
又要滿足「hover」遊標懸浮
偽元素在一個選擇器中只能出現一次，並且只能出現在末尾 （這裡有同學誤會了，所以我作出了修改）
像下面的樣式是無法生效的
p::first-letter:hover { /*错误的写法：伪元素不是末尾*/
color: red;}p::first-letter::selection { /*错误的写法：伪元素出现了多个*/
color: red;}優先權 在計算權重的時候
偽類別與類別優先權相同
偽元素與標籤優先權相同
以上是關於CSS3中的偽類與偽元素的區別及注意事項的詳細內容。更多資訊請關注PHP中文網其他相關文章！
