css中偽類與偽元素的概念是很容易混淆的
今天就來談談偽類與偽元素之間的區別
首先先來看看偽類與偽元素的定義
w3c中對於它們是這麼解釋的
講道理，可能我語文不好，我覺得這兩句話是等價的 :-)
根本不能看出有什麼區別
都是對某些選擇器「加特技」
標準有這麼一句話翻譯過來是這樣的
css 引入偽類和偽元素的概念是為了實現基於文件樹之外的資訊的格式化這話更抽象，其實意思就是對那些我們不能通過class、id等選擇元素的補充
這個區別我們需要乙個例子來理解
如果我們想要第乙個em標籤字型顏色變紅怎麼做呢
使用我們熟悉的偽類很簡單
但是如果不存在偽類我們怎麼做呢
這是我們就需要為第乙個em標籤新增類
class="first-child">thisem>
is a textem>
p>
em
.first-child
thisem>
is a textem>
p>
現在我想讓這個段落的第乙個字母變紅
怎麼做呢
這回我們需要使用偽元素
同樣假設偽元素不存在的情況
這時我們只能巢狀span標籤來實現
tspan>hisem>
is a textem>
p>
p
span
偽類的效果可以通過新增實際的類來實現
偽元素的效果可以通過新增實際的元素來實現
它們的本質區別就是是否抽象創造了新元素
偽類最開始的時候只是用來表示元素的動態（典型的錨偽類link、visited、hover、active）
在css2標準中對它進行了擴充套件讓它雖然邏輯存在但不需要在dom樹中標識
偽元素代表了某個元素的子元素，雖然邏輯存在，但不存在於dom樹
雖然它們的概念很容易被我們混淆
但是也不影響我們正常使用
我在css3選擇器介紹及用法總結中說過
偽類只能使用「：」
而偽元素既可以使用「:」，也可以使用「::」
這裡我就解釋一下為什麼
css3中的標準是偽類使用單冒號「:」
而偽元素使用雙冒號「::」（避免混淆）
但是在此之前無論是偽類還是偽元素都使用單冒號「:」
所以為了保證相容偽元素兩種使用方法都是可以的
但是低版本ie有雙冒號相容問題
所以以前編寫樣式的人們對於偽類和偽元素就乾脆統統使用單冒號
導致這種混淆一直延續下來
在使用偽類和偽元素的時候
有一點要特別注意
偽類就像真正的類一樣，可以疊加使用
沒有數量上限，只要不是互斥的
比如這樣
em
:first-child
:hover
但注意，這裡是「與」的關係
也就是說既要滿足「first-child」第乙個子元素
又要滿足「hover」游標懸浮
偽元素就要嚴格的多
偽元素在乙個選擇器中只能出現一次，並且只能出現在末尾
（這裡有同學誤會了，所以我作出了修改）
像下面的樣式是無法生效的
p
::first-letter
:hover
p
::first-letter
::selection
在計算權重的時候
偽類與類優先順序相同
偽元素與標籤優先順序相同
==主頁傳送門==
css中偽類與偽元素的概念是很容易混淆的
今天就來談談偽類與偽元素之間的區別
CSS3 偽元素和偽類
css偽類和偽元素的區別，在css3中，實際上的偽元素應該只有 before和 after兩個了，這兩個元素是實際存在在dom中的，而類本身就是表示元素的狀態，所以偽類應該也是為了表示元素的狀態的。在css3中，可以直接用 還是 來區分偽類和為元素了。由於偽類主要是表示元素的狀態，那麼偽類的主要功能...
css3 偽元素和偽類
1，定義 w3c定義 偽元素偽類 都可以向某些選擇器設定特殊效果。css2中定義 css3中的定義 1 偽元素 在dom樹中建立了一些抽象元素 虛擬的容器 由兩個冒號 開頭 css2中並沒有區別 為了相容性一般還是寫乙個冒號 2 偽類 為了選擇器找到那些不存在於dom樹中的資訊 及 不能被常規css...
CSS3偽類選擇器及偽元素
1.偽類選擇器概述 在css中，可使用偽類選擇器把相同的元素定義成不同的樣式，如針對p元素，可以做以下定義。p.right p.center 在css中，除了上述類選擇器之外，還有一種偽類選擇器，這種偽類選擇器與類選擇器的區別是，類選擇器可以隨便起名，如上面的p.right和p.center,也可以...