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