css中偽類和偽元素有哪些區(qū)別

這篇文章將為大家詳細講解有關(guān)css中偽類和偽元素有哪些區(qū)別，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

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

（相當(dāng)于一個特殊的class選擇器，用來添加一些特殊效果）

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

（相當(dāng)于一個特殊的元素（p、span），可以用來存放一些特殊樣式或者內(nèi)容）

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

• 偽類

• 偽元素

  Selector	Meaning	CSS
  ::first-letter	選擇指定元素的第一個單詞	1
  ::first-line	選擇指定元素的第一行	1
  ::after	在指定元素的內(nèi)容前面插入內(nèi)容	2
  ::before	在指定元素的內(nèi)容后面插入內(nèi)容	2
  ::selection	選擇指定元素中被用戶選中的內(nèi)容	3

:before和::before的區(qū)別

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

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

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

注意：

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

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

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

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

關(guān)于css中偽類和偽元素有哪些區(qū)別就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。