css偽類和偽元素的區別，:before和::before的區別

偽類用於選擇DOM樹之外的信息，或是不能用簡單選擇器進行表示的信息。前者包含那些匹配指定狀態的元素，比如:visited，:active；后者包含那些滿足一定邏輯條件的DOM樹中的元素，比如:first-child，:first-of-type，:target。

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

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

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

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

• 偽類

Selector	Meaning	CSS
:active	選擇正在被激活的元素	1
:hover	選擇被鼠標懸浮着元素	1
:link	選擇未被訪問的元素	1
:visited	選擇已被訪問的元素	1
:first-child	選擇滿足是其父元素的第一個子元素的元素	2
:lang	選擇帶有指定 lang 屬性的元素	2
:focus	選擇擁有鍵盤輸入焦點的元素	2
:enable	選擇每個已啟動的元素	3
:disable	選擇每個已禁止的元素	3
:checked	選擇每個被選中的元素	3
:target	選擇當前的錨點元素	3
:first-of-type	選擇滿足是其父元素的第一個某類型子元素的元素	3
:last-of-type	選擇滿足是其父元素的最后一個某類型子元素的元素	3
:only-of-type	選擇滿足是其父元素的唯一一個某類型子元素的元素	3
:nth-of-type(n)	選擇滿足是其父元素的第n個某類型子元素的元素	3
:nth-last-of-type(n)	選擇滿足是其父元素的倒數第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的區別

1. 二者寫法是等效的，都表示偽元素。

2. :before是CSS2的寫法，::before是CSS3的寫法。

3. :before的兼容性比::before兼容性好，但是H5開發中建議使用::before

注意：

1. 偽元素要配合content屬性一起使用

2. 偽元素不會出現在DOM中，所以不能通過js來操作，僅僅是在 CSS 渲染層加入

3. 偽元素的特效通常要使用:hover偽類樣式來激活

.test:hover::before { /* 這時animation和transition才生效 */ }  

 

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

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