偽類與偽元素的區別

2021-08-20 17:38:58 字數 1131 閱讀 2227

w3c關於偽類偽元素的定義

種類

firsti>

second i>

p>

p>i

:first-child

效果:

如何模擬上述效果? 新增類

class="first-child">firsti>

second i>

p>

.first-child

再看偽元素的效果及模擬:

hello world

p>

p

:first-letter

效果:

如何模擬上述效果?新增元素

hspan>ello world

p>

span

這也是為什麼叫做偽類,為什麼叫做為元素的原因。

偽元素與元素的區別

偽元素無法通過js獲取其dom

偽元素無法通過瀏覽器開發者工具直接檢視

偽元素預設是 inline

使用偽元素的注意事項

使用偽元素before,after必須設定content

使用偽元素before,after顯示背景圖,一定要使用display設定為塊元素

使用偽元素before,after設定為display:inline-block,需要再次設定vertical-align:middle 總結

為了區分偽類和偽元素,css3明確規定偽類用乙個單引號表示,偽元素用乙個雙引號表示。

由於相容性問題,單引號表示偽元素仍然可以使用。

偽類與偽元素的區別

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

偽類與偽元素的區別

詳解偽類與偽元素推薦 偽類與偽元素的區別 偽類本質上是為了彌補常規css選擇器的不足,以便獲取更多的資訊。偽元素本質上是建立乙個有內容的虛擬容器。css3中偽類和偽元素語法不同。偽類 link hover 偽元素 before after 可以同時使用多個偽類,卻只能同時使用乙個偽元素。其中偽元素和...

偽元素與偽類的區別

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