偽類與偽元素的區別

2021-10-03 06:12:49 字數 751 閱讀 2031

詳解偽類與偽元素推薦:

偽類與偽元素的區別

偽類本質上是為了彌補常規css選擇器的不足,以便獲取更多的資訊。

偽元素本質上是建立乙個有內容的虛擬容器

css3中偽類和偽元素語法不同。

偽類 :link :hover

偽元素 ::before ::after

可以同時使用多個偽類,卻只能同時使用乙個偽元素。

其中偽元素和偽類的根本區別在於:他們是否創造了新的元素,這個新的元素就叫做「偽元素」

偽元素/偽物件:不存在在dom文件中,是虛擬元素,是建立新元素。這個新元素是某個元素的子元素,這個元素雖然邏輯上存在,但卻不存在於文件樹中。

偽類:存在於dom文件中,(無標籤,只在觸發條件時才能看到),邏輯上存在但在文件樹上卻無需標識的分類。

因為偽元素類似於新增類,故可新增多個,而偽元素在乙個選擇其中只能出現一次,並且只能出現在末尾。

偽元素單冒號與雙冒號區別

相同點

不同點注意:

偽物件要配合content屬性一起使用。

偽物件不會出現在dom中,所以不能通過js來操作,僅僅是在 css 渲染層加入。

偽物件的特效通常要使用:hover偽類樣式來啟用。

222還是666

偽類與偽元素的區別

css 引入偽類和偽元素的概念是為了實現基於文件樹之外的資訊的格式化 偽類用於向某些選擇器新增特殊的效果。偽類選擇元素基於的是當前元素處於的狀態,或者說元素當前所具有的特性,而不是元素的id class 屬性等靜態的標誌。由於狀態是動態變化的,所以乙個元素達到乙個特定狀態時,它可能得到乙個偽類的樣式...

偽類與偽元素的區別

w3c關於偽類偽元素的定義 種類firsti second i p p i first child 效果 如何模擬上述效果?新增類 class first child firsti second i p first child 再看偽元素的效果及模擬 hello world p p first le...

偽元素與偽類的區別

偽類和偽元素的異同 css selectors level 3 該規範中為偽類和偽元素做了區分,偽類使用單冒號,偽元素開始使用雙冒號。比如偽類 first child 偽元素 first line first letter before after css 3在css2.1的基礎上增加了不少偽類 t...