一、前言
在CSS1和CSS2中對(duì)偽類和偽選擇器沒有做出很明顯的區(qū)別定義，而二者在語(yǔ)法是一樣的，都是以:開頭，這造成很多人會(huì)將某些偽元素誤認(rèn)為是偽類，如:before，:after；而在CSS3給出的定義中，二者區(qū)別更為明顯，也更容易理解。
二、定義
偽類用于選擇DOM樹之外的信息，比如
:visited，:active；或是不能用簡(jiǎn)單選擇器進(jìn)行表示的信息，包含那些滿足一定邏輯條件的DOM樹中的元素，比如:first-child，:first-of-type，:target。
偽元素
DOM樹沒有定義的虛擬元素。不同于其他選擇器，它不以元素為最小選擇單元，它選擇的是元素指定內(nèi)容。比如::before表示選擇元素內(nèi)容的之前內(nèi)容，也就是""；::selection表示選擇元素被選中的內(nèi)容。
三、語(yǔ)法
在CSS3中，偽類與偽元素在語(yǔ)法上也有所區(qū)別，偽元素修改為以::開頭。但因?yàn)闅v史原因，瀏覽器對(duì)以:開頭的偽元素也繼續(xù)支持，但建議規(guī)范書寫為::開頭。
四、總結(jié)
- 1.偽類本質(zhì)上是為了彌補(bǔ)常規(guī)CSS選擇器的不足，以便獲取到更多信息；
- 2.偽元素本質(zhì)上是創(chuàng)建了一個(gè)有內(nèi)容的虛擬容器；
- 3.CSS3中偽類和偽元素的語(yǔ)法不同；
- 4.可以同時(shí)使用多個(gè)偽類，而
只能同時(shí)使用一個(gè)偽元素；
五、偽類/偽元素一覽表
偽類
| Selector | Meaning | CSS |
|---|---|---|
| :active | 選擇正在被激活的元素 | 1 |
| :hover | 選擇被鼠標(biāo)懸浮著元素 | 1 |
| :link 選擇未被訪問的元素 | 1 | |
| :visited | 選擇已被訪問的元素 | 1 |
| :first-child | 選擇滿足是其父元素的第一個(gè)子元素的元素 | 2 |
| :lang | 選擇帶有指定 lang 屬性的元素 | 2 |
| :focus | 選擇擁有鍵盤輸入焦點(diǎn)的元素 | 2 |
| :enable | 選擇每個(gè)已啟動(dòng)的元素 | 3 |
| :disable | 選擇每個(gè)已禁止的元素 | 3 |
| :checked 選擇每個(gè)被選中的元素 | 3 | |
| :target | 選擇當(dāng)前的錨點(diǎn)元素 | 3 |
| :first-of-type | 選擇滿足是其父元素的第一個(gè)某類型子元素的元素 | 3 |
| :last-of-type | 選擇滿足是其父元素的最后一個(gè)某類型子元素的元素 | 3 |
| :only-of-type | 選擇滿足是其父元素的唯一一個(gè)某類型子元素的元素 | 3 |
| :nth-of-type(n) | 選擇滿足是其父元素的第n個(gè)某類型子元素的元素 | 3 |
| :nth-last-of-type(n) | 選擇滿足是其父元素的倒數(shù)第n個(gè)某類型的元素 | 3 |
| :only-child | 選擇滿足是其父元素的唯一一個(gè)子元素的元素 | 3 |
| :last-child | 選擇滿足是其父元素的最后一個(gè)元素的元素 | 3 |
| :nth-child(n) | 選擇滿足是其父元素的第n個(gè)子元素的元素 | 3 |
| :nth-last-child(n) | 選擇滿足是其父元素的倒數(shù)第n個(gè)子元素的元素 | 3 |
| :empty | 選擇滿足沒有子元素的元素 | 3 |
| :in-range | 選擇滿足值在指定范圍內(nèi)的元素 | 3 |
| :out-of-range | 選擇值不在指定范圍內(nèi)的元素 | 3 |
| :invalid | 選擇滿足值為無效值的元素 | 3 |
| :valid | 選擇滿足值為有效值的元素 | 3 |
| :not(selector) | 選擇不滿足selector的元素 | 3 |
| :optional | 選擇為可選項(xiàng)的表單元素，即沒有“required”屬性 | 3 |
| :read-only | 選擇有"readonly"的表單元素 | 3 |
| :read-write | 選擇沒有"readonly"的表單元素 | 3 |
| :root | 選擇根元素 | 3 |
偽元素
| Selector | Meaning | CSS |
|---|---|---|
| ::first-letter | 選擇指定元素的第一個(gè)單詞 | 1 |
| ::first-line | 選擇指定元素的第一行 | 1 |
| ::after | 在指定元素的內(nèi)容前面插入內(nèi)容 | 2 |
| ::before | 在指定元素的內(nèi)容后面插入內(nèi)容 | 2 |
| ::selection | 選擇指定元素中被用戶選中的內(nèi)容 | 3 |
