css中偽類和偽元素有什麼差別？ :before和::before的區別

本篇文章帶給大家的內容是介紹css中偽類和偽元素有什麼差別？ :before和::before的差別。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

偽類是用來選擇DOM樹以外的訊息，或是無法用簡單選擇器來表示的訊息。前者包含那些符合指定狀態的元素，例如:visited，:active；後者包含那些滿足一定邏輯條件的DOM樹中的元素，例如:first- child，:first-of-type，:target。

（相當於一個特殊的class選擇器，用來添加一些特殊效果）

偽元素為DOM樹沒有定義的虛擬元素。不同於其他選擇器，它不以元素為最小選擇單元，它選擇的是元素指定內容。例如::before表示選擇元素內容的之前內容，也就是""；::selection表示選擇元素被選取的內容。

（相當於一個特殊的元素（p、span），可以用來存放一些特殊樣式或內容）

在CSS3中，偽類與偽元素在語法上也有所區別，偽元素修改為以::開頭。但因為歷史原因，瀏覽器對以:開頭的偽元素也繼續支持，但建議規範書寫為::開頭。

• 偽類別

  #

##:first-child選擇滿足是其父元素的第一個子元素的元素 2:lang#選擇帶有指定lang 屬性的元素2:focus#選擇擁有鍵盤輸入焦點的元素2:enable#選擇每個已啟動的元素#3:disable選擇每個已禁止的元素3:checked選擇每個被選取的元素3:target選擇目前的錨點元素3:first-of-type:last-of -type:only-of-type:nth-of-type(n):nth-last-of-type (n)

• 偽元素

Selector	Meaning	CSS
##:active	選擇正在被啟動的元素	#1
:hover	選擇被滑鼠懸浮著元素	1
:link	選擇未被存取的元素	1
:visited	選擇已被存取的元素	1
##選擇滿足是其父元素的第一個某類型子元素的元素	3
選擇滿足是其父元素的最後一個某類型子元素的元素	3
選擇滿足是其父元素的唯一一個某類型子元素的元素	#3
選擇滿足是其父元素的第n個某類型子元素的元素	#3
選擇滿足是其父元素的倒數第n個某類型的元素	3
:only-child	#選擇滿足是其父元素的唯一子元素的元素	3
:last-child	#選擇滿足是其父元素的最後一個元素的元素	3
#:nth-child(n)	#選擇滿足是其父元素的第n個子元素的元素	3
:nth- last-child(n)	選擇滿足是其父元素的倒數第n個子元素的元素	3
:empty	選擇滿足沒有子元素的元素	3
:in-range	#選擇滿足值在指定範圍內的元素	#3
:out-of-range	#選擇值不在指定範圍內的元素	3
:invalid	選擇滿足值為無效值的元素	3
:valid	選擇滿足值為有效值的元素	3
#:not(selector)	選擇不滿足selector的元素	3
:optional	選擇為可選項的表單元素，即沒有「required」屬性	#3
:read- only	選擇有"readonly"的表單元素	3
##:read-write	選擇沒有"readonly"的表單元素	3
:root	選擇根元素	#3

#Selector	Meaning	#CSS
::first-letter	#選擇指定元素的第一個單字	1
::first-line	選擇指定元素的第一行	1
::after	在指定元素的內容前面插入內容	2
#::before	在指定元素的內容後面插入內容	2
::selection	選擇指定元素中被使用者選取的內容	3

:before和::before的區別

#二者寫法是等效的，都表示偽元素。
:before是CSS2的寫法，::before是CSS3的寫法。
:before的相容性比::before相容性好，但是H5開發中建議使用::before

注意：

#偽元素要配合content屬性一起使用
#偽元素不會出現在DOM中，所以不能透過js來操作，只是在CSS 渲染層加入
偽元素的特效通常要使用:hover偽類樣式來啟動

.test:hover::before { /* 这时animation和transition才生效 */ }

參考網址：https://www.cnblogs.com/ammyben/p /8012747.html

###https://blog.csdn.net/yangxiaoyanger/article/details/79712180#######

以上是css中偽類和偽元素有什麼差別？ :before和::before的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！