偽類是用於為某些選擇器添加特殊效果的；偽元素是用於將特殊的效果添加到某些選擇器的。偽類的效果可以透過添加實際的類別來實現；偽物件的效果可以透過添加實際的元素來實現。簡單來說，它們的本質區別為是否抽象創造了新元素。
本教學操作環境：windows7系統、CSS3版、Dell G3電腦。
其中偽類別和偽元素（偽物件）的根本差異在於：它們是否創造了新的元素。
偽元素/偽物件：不存在在DOM文件中，是虛擬的元素，是建立新元素。代表某個元素的子元素，這個子元素雖然在邏輯上存在，但卻不實際存在於文檔樹中。
偽物件選擇符
| #Properties 屬性 |
CSS Version 版本 |
Inherit From Parent 繼承性 |
Description 簡介 |
|---|---|---|---|
| CSS3/CSS1 | #無 | CSS2/CSS1 E:first-letter/E::first-letter 偽物件選擇符，設定物件內的第一個字元的樣式。 | |
| #CSS3/CSS1 | 無 | ##CS3/CSS1 偽物件選擇符E:first-line/E::first-line，設定物件內的第一行的樣式。 | |
| CSS3/CSS2 | CSS3/CSS3 偽物件選擇子E :before/E::before，設定在物件前（依據物件樹的邏輯結構）所發生的內容。用來和content屬性一起使用 | ||
| CSS3/CSS2 | 沒有 | CSS3 /CSS2 偽物件選擇符E:after/E::after，設定在物件後面（依據物件樹的邏輯結構）所發生的內容。用來和content屬性一起使用 | |
| CSS3 | 無 | CSS3 偽物件選擇子E: :selection，設定物件被選擇時的顏色。 |
| #Properties 屬性 |
CSS Version 版本 |
Inherit From Parent 繼承性 |
Description 簡介 |
|---|---|---|---|
| CSS1 | 無 | CSS1 偽類選擇子E:link ，設定超連結a在未被存取前的樣式。 | |
| CSS1 | #無 | CSS1 偽類別選擇子E:visited，設定超連結a在其連結地址已被存取過時的樣式。 | |
| CSS2 | #無 | CSS2/CSS1 偽類別選擇符E:hover，設定元素在其滑鼠懸停時的樣式。 | |
| CSS2/CSS1 | #無 | CSS2/CSS1 偽類別選擇符E:active,設定元素在被使用者啟動（在滑鼠點擊與釋放之間發生的事件）時的樣式。 | |
| CSS2/CSS1 | 無 | CSS2/CSS1 偽類別選擇符E:focus,設定元素在成為輸入焦點（該元素的onfocus事件發生）時的樣式。 | |
| CSS2 | #無 | CSS2 偽類別選擇子E:lang() 符合使用特殊語言的E元素。 | |
| CSS3 | #無 | CSS3 偽類別選擇子E:not() 符合不含s選擇符的元素E。 | |
| CSS3 | 無 | CSS3 偽類別選擇子E:root，符合E元素在文件的根元素。 | |
| CSS2 | #CSS2 偽類別選擇子E:first-child 符合父元素的第一個子元素E。 | ||
| CSS3 | #無 | CSS3 偽類別選擇子E:last-child 符合父元素的最後一個子元素E。 | |
| CSS3 | #無 | CSS3 為例選擇符號E:only-child 符合父元素僅有的一個子元素E。 | |
| CSS3 | 無 | CSS3 偽類別選擇子E:nth-child (n) 符合父元素的第n個子元素E。 | |
| CSS3 | 無 | ##CSS3 偽類別選擇子E:nth -last-child(n) 符合父元素的倒數第n個子元素E。 | |
| CSS2 | 無 | CSS3 偽類別選擇子E:first-of- type 符合同類型中的第一個同級兄弟元素E。 | |
| CSS3 | #無 | CSS3 偽類別選擇子E:last-of- type 符合同類型中的最後一個同級兄弟元素E。 | |
| CSS3 | 無 | CSS3 偽類別選擇子E:only-of- type，匹配同類型中的唯一的一個同級兄弟元素E。 | |
| CSS3 | 無 | ##CSS3 偽類別選擇子E:nth -of-type(n)，匹配同類型中的第n個同級兄弟元素E。E:nth-last-of-type(n) | |
| 無 | CSS3 偽類別選擇子E :nth-last-of-type(n) 符合同類型中的倒數第n個同級兄弟元素E。 | E:empty | |
| #無 | CSS3 偽類別選擇子E:empty 符合沒有任何子元素（包括text節點）的元素E。 | E:checked | |
| #無 | CSS3 偽類別選擇符E:checked 符合使用者介面上處於選取狀態的元素E。 (用於input type為radio與checkbox 的form元素) | E:enabled | |
| #無 | #CSS3 偽類別選擇符E:enabled 匹配使用者介面上處於可用狀態的元素E。 | E:disabled | |
| #無 | CSS3 偽類別選擇子E:disabled 符合使用者介面上處於停用狀態的元素E。 | E:target | |
| #無 | CSS3 偽類別選擇子E:target 符合相關URL指向的E元素。 | @page:first | |
| #無 | CSS2 偽類別選擇符@page:first 設定頁面容器第一頁使用的樣式。只用於@page規則 | @page:left | |
| 無 | ##CSS2 偽類別選擇符@page: left 置頁面容器位於裝訂線左邊的所有頁面所使用的樣式。僅用於@page規則 | @page:right | |
| 無 | CSS2 為物件選擇符@page: right 設定頁面容器位於裝訂線右邊的所有頁面所使用的樣式。只用於@page規則 |
再看看W3C中對於二者應用的描述：偽類：用於向某些選擇器添加特殊的效果 舉個栗子： <div>
<p>a</p>
<p>b c</p>
</div>登入後複製 如果我們想要第一個p標籤字體顏色變紅怎麼做呢使用偽類就會很簡單： p:first-child {
color: red;
}登入後複製 登入後複製 但是如果不用偽類我們怎麼做呢？這時我們就需要為第一個p標籤添加一個類別class <div>
<p class="first-child">a</p>
<p>b c</p>
</div>登入後複製 p:first-child {
color: red;
}登入後複製 登入後複製 可以實現同樣的效果,但是需要多寫一個類別 如果使用偽元素該如何實現上述操作呢？ p::first-letter {
color: red;
}登入後複製 如果不用偽元素我們怎麼做呢？ <div>
<p><span>a</span></p>
<p>b c</p>
</div>登入後複製 p span {
color: red;
}登入後複製 可以看出二者差異了， 偽類別的效果可以透過加入實際的類別來實現 偽元素的效果可以透過加入實際的元素來實現 所以它們的本質差異就是是否抽象創造了新元素 注意： #偽類別只能使用“ 而偽元素既可以使用“ 因為偽類別是類似新增類別所以可以是多個，而偽元素在一個選擇器中只能出現一次，只能出現在結尾 相關問題 #:after/::after和:before/::before的異同 相同點： 都可以用來表示偽類別對象，用來設定物件前的內容 :before和::before寫法是等效的; :after和::after寫法是等效的 不同點： :before/:after是Css2的寫法，::before/::after是Css3的寫法 :before/:after 的兼容性要比::before/::after好， #不過在H5開發中建議使用::before/::after比較好 注意： #偽物件要配合content屬性一起使用 偽物件不會出現在DOM中，所以不能透過js來操作，只是在CSS 渲染層加入 偽物件的特效通常要使用:hover偽類樣式來啟動 eg:當滑鼠移在span上時，span前插入”duang” <style>
span{
background: yellow;
}
span:hover::before{
content:"duang";
}
</style>
<span>222</span>登入後複製 （學習視頻分享：css視頻教程） |
以上是css中偽類別和偽物件（偽元素）差異是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
