搜尋

首頁  >  文章  >  web前端  >  css中偽類別和偽物件（偽元素）差異是什麼

css中偽類別和偽物件（偽元素）差異是什麼

青灯夜游
青灯夜游原創
2021-07-06 13:58:563736瀏覽

偽類是用於為某些選擇器添加特殊效果的；偽元素是用於將特殊的效果添加到某些選擇器的。偽類的效果可以透過添加實際的類別來實現；偽物件的效果可以透過添加實際的元素來實現。簡單來說，它們的本質區別為是否抽象創造了新元素。

css中偽類別和偽物件（偽元素）差異是什麼

本教學操作環境：windows7系統、CSS3版、Dell G3電腦。

其中偽類別和偽元素（偽物件）的根本差異在於：它們是否創造了新的元素。

偽元素/偽物件：不存在在DOM文件中，是虛擬的元素，是建立新元素。代表某個元素的子元素，這個子元素雖然在邏輯上存在，但卻不實際存在於文檔樹中。

偽物件選擇符

##E:first -letter/E::first-letterCSS3/CSS1#無CSS2/CSS1 E:first-letter/E::first-letter 偽物件選擇符，設定物件內的第一個字元的樣式。 E:first-line/E::first-line#CSS3/CSS1無E:before/E::beforeE:after/E::afterE::selection

偽類：存在DOM文檔中，邏輯上存在但在文檔樹中卻無須標識的「幽靈」分類。

偽類選擇符

#Properties
屬性		 CSS Version
版本		 Inherit From Parent
繼承性		 Description
簡介
##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，設定物件被選擇時的顏色。
##E:link CSS1無CSS1 偽類選擇子E:link ，設定超連結a在未被存取前的樣式。 E:visitedCSS1#無CSS1 偽類別選擇子E:visited，設定超連結a在其連結地址已被存取過時的樣式。 E:hoverCSS2#無CSS2/CSS1 偽類別選擇符E:hover，設定元素在其滑鼠懸停時的樣式。 E:activeCSS2/CSS1#無CSS2/CSS1 偽類別選擇符E:active,設定元素在被使用者啟動（在滑鼠點擊與釋放之間發生的事件）時的樣式。 E:focusCSS2/CSS1無CSS2/CSS1 偽類別選擇符E:focus,設定元素在成為輸入焦點（該元素的onfocus事件發生）時的樣式。 E:lang()CSS2#無CSS2 偽類別選擇子E:lang() 符合使用特殊語言的E元素。 E:not()CSS3#無CSS3 偽類別選擇子E:not() 符合不含s選擇符的元素E。 E:rootCSS3無CSS3 偽類別選擇子E:root，符合E元素在文件的根元素。 E:first-childCSS2#CSS2 偽類別選擇子E:first-child 符合父元素的第一個子元素E。 E:last-childCSS3#無CSS3 偽類別選擇子E:last-child 符合父元素的最後一個子元素E。 E:only-childCSS3#無CSS3 為例選擇符號E:only-child 符合父元素僅有的一個子元素E。 E:nth-child(n)CSS3無CSS3 偽類別選擇子E:nth-child (n) 符合父元素的第n個子元素E。 E:nth-last-child(n)CSS3無E:first-of-typeE:last-of-typeE:only-of-typeE:nth-of-type(n)##CSS3 偽類別選擇子E:nth -of-type(n)，匹配同類型中的第n個同級兄弟元素E。 E:nth-last-of-type(n)CSS3無CSS3 偽類別選擇子E :nth-last-of-type(n) 符合同類型中的倒數第n個同級兄弟元素E。 E:emptyCSS3#無CSS3 偽類別選擇子E:empty 符合沒有任何子元素（包括text節點）的元素E。 E:checkedCSS3#無CSS3 偽類別選擇符E:checked 符合使用者介面上處於選取狀態的元素E。 (用於input type為radio與checkbox 的form元素)E:enabledCSS3#無#CSS3 偽類別選擇符E:enabled 匹配使用者介面上處於可用狀態的元素E。 E:disabledCSS3#無CSS3 偽類別選擇子E:disabled 符合使用者介面上處於停用狀態的元素E。 E:targetCSS3#無CSS3 偽類別選擇子E:target 符合相關URL指向的E元素。 @page:firstCSS2#無CSS2 偽類別選擇符@page:first 設定頁面容器第一頁使用的樣式。只用於@page規則@page:leftCSS2無CSS2
#Properties
屬性		 CSS Version
版本		 Inherit From Parent
繼承性		 Description
簡介
##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 無
##CSS2 偽類別選擇符@page: left 置頁面容器位於裝訂線左邊的所有頁面所使用的樣式。僅用於@page規則 @page:right
無 CSS2 為物件選擇符@page: right 設定頁面容器位於裝訂線右邊的所有頁面所使用的樣式。只用於@page規則

再看看W3C中對於二者應用的描述：

偽類：用於向某些選擇器添加特殊的效果
偽元素：用於將特殊的效果加到某些選擇器
其實根本意思就是對那些不能透過class、id等選擇元素的補充

舉個栗子：

<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中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：css不起作用的原因是什麼下一篇：css不起作用的原因是什麼

相關文章

看更多