一物舒、前言
在CSS1和CSS2中對偽類和偽選擇器沒有做出很明顯的區(qū)別定義色洞，而二者在語法是一樣的，都是以:開頭冠胯，這造成很多人會將某些偽元素誤認(rèn)為是偽類火诸，如:before，:after荠察；而在CSS3給出的定義中置蜀，二者區(qū)別更為明顯，也更容易理解悉盆。
二盯荤、定義
偽類用于選擇DOM樹之外的信息，比如
:visited焕盟，:active秋秤；或是不能用簡單選擇器進(jìn)行表示的信息，包含那些滿足一定邏輯條件的DOM樹中的元素，比如:first-child航缀，:first-of-type商架，:target。
偽元素
DOM樹沒有定義的虛擬元素芥玉。不同于其他選擇器蛇摸，它不以元素為最小選擇單元，它選擇的是元素指定內(nèi)容灿巧。比如::before表示選擇元素內(nèi)容的之前內(nèi)容赶袄，也就是""；::selection表示選擇元素被選中的內(nèi)容抠藕。
三饿肺、語法
在CSS3中，偽類與偽元素在語法上也有所區(qū)別盾似，偽元素修改為以::開頭敬辣。但因為歷史原因，瀏覽器對以:開頭的偽元素也繼續(xù)支持零院，但建議規(guī)范書寫為::開頭溉跃。
四、總結(jié)
- 1.偽類本質(zhì)上是為了彌補常規(guī)CSS選擇器的不足告抄，以便獲取到更多信息撰茎；
- 2.偽元素本質(zhì)上是創(chuàng)建了一個有內(nèi)容的虛擬容器；
- 3.CSS3中偽類和偽元素的語法不同打洼；
- 4.可以同時使用多個偽類龄糊，而
只能同時使用一個偽元素；
五募疮、偽類/偽元素一覽表
偽類
| Selector | Meaning | CSS |
|---|---|---|
| :active | 選擇正在被激活的元素 | 1 |
| :hover | 選擇被鼠標(biāo)懸浮著元素 | 1 |
| :link 選擇未被訪問的元素 | 1 | |
| :visited | 選擇已被訪問的元素 | 1 |
| :first-child | 選擇滿足是其父元素的第一個子元素的元素 | 2 |
| :lang | 選擇帶有指定 lang 屬性的元素 | 2 |
| :focus | 選擇擁有鍵盤輸入焦點的元素 | 2 |
| :enable | 選擇每個已啟動的元素 | 3 |
| :disable | 選擇每個已禁止的元素 | 3 |
| :checked 選擇每個被選中的元素 | 3 | |
| :target | 選擇當(dāng)前的錨點元素 | 3 |
| :first-of-type | 選擇滿足是其父元素的第一個某類型子元素的元素 | 3 |
| :last-of-type | 選擇滿足是其父元素的最后一個某類型子元素的元素 | 3 |
| :only-of-type | 選擇滿足是其父元素的唯一一個某類型子元素的元素 | 3 |
| :nth-of-type(n) | 選擇滿足是其父元素的第n個某類型子元素的元素 | 3 |
| :nth-last-of-type(n) | 選擇滿足是其父元素的倒數(shù)第n個某類型的元素 | 3 |
| :only-child | 選擇滿足是其父元素的唯一一個子元素的元素 | 3 |
| :last-child | 選擇滿足是其父元素的最后一個元素的元素 | 3 |
| :nth-child(n) | 選擇滿足是其父元素的第n個子元素的元素 | 3 |
| :nth-last-child(n) | 選擇滿足是其父元素的倒數(shù)第n個子元素的元素 | 3 |
| :empty | 選擇滿足沒有子元素的元素 | 3 |
| :in-range | 選擇滿足值在指定范圍內(nèi)的元素 | 3 |
| :out-of-range | 選擇值不在指定范圍內(nèi)的元素 | 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 | 在指定元素的內(nèi)容前面插入內(nèi)容 | 2 |
| ::before | 在指定元素的內(nèi)容后面插入內(nèi)容 | 2 |
| ::selection | 選擇指定元素中被用戶選中的內(nèi)容 | 3 |
