css2.1 Selectors章節(jié)中對(duì)偽類(lèi)與偽元素的描述: CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.
也就是說(shuō)，偽類(lèi)和偽元素是用來(lái)修飾不在文檔樹(shù)中的部分，比如，一句話(huà)中的第一個(gè)字母，或者是列表中的第一個(gè)元素。
一、基本概念
偽類(lèi)
用于當(dāng)已有元素處于的某個(gè)狀態(tài)時(shí)，為其添加對(duì)應(yīng)的樣式；
效果等同于給元素添加一個(gè)類(lèi)，然后定義這個(gè)類(lèi)的樣式。（由于它只有處于dom樹(shù)無(wú)法描述的狀態(tài)下才能為元素添加樣式，所以將其稱(chēng)為偽類(lèi)。）
常見(jiàn)偽類(lèi)：
-
:link,:visited,:hover,:active,:focus（狀態(tài)） -
:first-child,:first-of-type,:last-child,:last-of-type,:not,:nth-child,:nth-last-child,:nth-of-type,:only-child,:only-of-type（結(jié)構(gòu)） -
:checked,:default,:disabled,:invalid,:read-only, etc.（表單驗(yàn)證相關(guān)） -
:lang,:dir（語(yǔ)言相關(guān)）
偽元素
用于創(chuàng)建一些不在文檔樹(shù)中的元素，并為其添加樣式。
效果等同于創(chuàng)建一個(gè)虛擬的（不存在于DOM樹(shù)的）元素，并為之添加樣式。
常用偽元素：
-
::first-letter（相當(dāng)于創(chuàng)建了一個(gè)<span>來(lái)包裹首字母） ::first-line::before::after
二、用法與討論
1. 偽元素用單冒號(hào)還是雙冒號(hào)？
CSS3中偽元素用雙冒號(hào)::，如 ::after，以區(qū)分偽類(lèi)的單冒號(hào) :，如 :hover；
但出于兼容性考慮，目前規(guī)范建議都使用單冒號(hào)。
2. 偽類(lèi)選擇器加與不加空格的區(qū)別？
（這里討論的主要是結(jié)構(gòu)性偽類(lèi)選擇器，且待考證，歡迎討論）
- 偽類(lèi)選擇器前不加空格：選擇的是元素本身；
- 偽類(lèi)選擇器前加空格：選擇的是元素的子元素（且不一定是該種元素）；
實(shí)例：
<div>
<span>A</span>
<span>B</span>
<span>C <em>D1</em><em>D2</em><a>E1</a><a>E2</a></span>
<span>F <span>G</span></span>
<span>H</span>
</div>
若不加空格（如下例），修飾的是<span>元素，且該元素是其父元素下的第一個(gè)<span>元素，因此 A 和 G 呈紅色：
span:first-of-type {
color: red;
}
若加空格（如下例），修飾的是<span>元素的子元素中，第一個(gè)任意類(lèi)型的元素；可能選中多個(gè)，且選中的元素不一定是<span>元素，因此 D1，E1 和 G 呈黃色：
span :first-of-type {
color: yellow;
}
經(jīng)驗(yàn)證 :first-child, :first-of-type, :nth-child 符合以上用法，且:first-of-type的 MDN文檔內(nèi)也列舉了這兩種用法。
3. :first-child 和 :first-of-type 的區(qū)別？
(1) :first-child 比 :first-of-type 多一個(gè)條件：
-
p:first-child- 父元素下的第一個(gè)<p>元素 且 該元素是父元素下的第一個(gè)元素 -
p:first-of-type- 父元素下的第一個(gè)<p>元素
也即，任何 :first-child 元素一定是 :first-of-type 元素。
(2) 對(duì)于一個(gè)父元素，:first-child 匹配的最多是一個(gè)子元素，而 :first-of-type 可能匹配多個(gè)不同的子元素
-
div :first-child-<div>元素的第一個(gè)子元素 -
div :first-of-type-<div>元素的子元素里面每一種元素的第一個(gè)，假設(shè)有三種子元素<p>,<a>,<span>（個(gè)數(shù)不限），則會(huì)匹配到三個(gè)元素。
參考資料：
CSS偽類(lèi)與偽元素完全指南
總結(jié)偽類(lèi)與偽元素（以上兩篇譯自/參考自同一篇原文）
詳解 CSS 屬性 - 偽類(lèi)和偽元素的區(qū)別
Jquery偽類(lèi)選擇器加與不加空格的區(qū)別
