關於css僞類，僞元素詳解總結

僞類

僞類就是一種虛構的狀態或者說是一個具備特殊屬性的元素可使用CSS進行樣式修飾。常見的幾種僞類是:

:link , :visited , :hover , :active , :first-child 以及 :nth-child。

這裏還有不少，接下來咱們將要逐一進行介紹。此外，僞類前面老是加一個冒號(:)。以後跟着僞類的名字或者是括號裏面的值，如:nth-child。

僞元素

關於僞元素，它們更像是虛擬的元素能夠和HTML元素同樣對待。區別在於它們並不存在於文檔樹或者DOM之中。這意味着咱們並無真正的指定僞元素，可是可使用CSS進行建立。常見的幾種僞元素是

::after , :before 以及 :first-letter。

在文章的最後咱們將對他們進行詳細的說明。

關於僞元素使用單冒號仍是雙冒號?

在大多數狀況下，二者都可。

CSS3中引入雙冒號(::)是爲了在僞類中，如::hover,:active,區分僞元素，如::before，::after。除了IE8及其如下版本不支持外，全部的瀏覽器均支持僞元素中雙冒號的使用。

一些僞元素，如::backdrop只接受雙冒號的使用。
就我我的而言，我使用單冒號以便使個人CSS能夠向後兼容一些舊瀏覽器。固然，在那些指定使用雙冒號的僞元素上使用雙冒號。
你能夠自由的去選擇使用，由於不存在對錯之分。
然而在寫這篇文章時，規範建議使用單冒號，理由如上所述，爲了獲得更好的向後兼容性

測試環境：xp ,ie7~8 chrome。

link 僞類 ：(：link,：visited) 這個是連接專用

動態僞類 ：(：hover,:active,:focus)

對於連接（a標記）無論是link僞類仍是動態僞類，在ie7-8,chrome 都有效果

對於表單元素，
ie7 下不支持動態僞類，
ie8下文本框，單選框都支持：focus，
chrome下文本框支持：focus，複選框不支持focus

對於p，tr ，ie7-8,chrome 都只支持：hover。

---

常見的hover、active僞類順序問題

下面是正確的順序：

1. a:link{}
2. a:visited{}
3. a:hover{}
4. a:active{}

---

僞類與僞元素的看起來很像，有什麼區別嗎？

不少人把僞類、僞元素都當作「僞類」來講，其實是有區別的。

僞類、僞元素，都是屬於CSS選擇器的範圍。

簡單的說：

僞類，若是我放棄僞類不用而 又想要僞類一樣的效果，通常我能夠爲元素加一個class類，也能達到僞類選擇器同樣的效果。（如，:first-child僞類）

僞元素，若是我放棄僞元素不用而 又想到達僞元素一樣的效果，我必須建立一個元素，才能達到僞元素的效果。（如，:first-line僞元素）

---

爲何有些寫一個冒號，有的是兩個冒號？

w3c的CSS3規範中規定：

:單冒號，用於僞類

::雙冒號，用於僞元素

可是在css2規範中，僞元素的寫法是:before——單冒號的形式。

僞類、僞元素的單冒號、雙冒號寫法問題

在CSS3規範中，僞類 與 僞元素，寫法是規定的：

僞類寫法：單冒號+僞類（如:last-child）

僞元素寫法：雙冒號+僞元素（如::first-line）

在CSS2規範中，僞類、僞元素都是使用單冒號+僞類或僞元素。

通常瀏覽器爲了兼容CSS，兩種都會支持， 可是早期的IE並無支持到CSS3的雙冒號寫法，爲了兼容，推薦使用單冒號的寫法。 （從IE9開始支持雙冒號僞元素寫法。）