css2.1 Selectors章節(jié)中對(duì)偽類與偽元素的描述: CSS introduces the concepts of pseudo-elements and pseudo-classes to permit formatting based on information that lies outside the document tree.
也就是說，偽類和偽元素是用來修飾不在文檔樹中的部分巧骚，比如，一句話中的第一個(gè)字母格二，或者是列表中的第一個(gè)元素劈彪。
一、基本概念
偽類
用于當(dāng)已有元素處于的某個(gè)狀態(tài)時(shí)顶猜，為其添加對(duì)應(yīng)的樣式沧奴；
效果等同于給元素添加一個(gè)類，然后定義這個(gè)類的樣式长窄。（由于它只有處于dom樹無法描述的狀態(tà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（語言相關(guān)）
偽元素
用于創(chuàng)建一些不在文檔樹中的元素，并為其添加樣式疮绷。
效果等同于創(chuàng)建一個(gè)虛擬的（不存在于DOM樹的）元素翰舌，并為之添加樣式。
常用偽元素：
-
::first-letter（相當(dāng)于創(chuàng)建了一個(gè)<span>來包裹首字母） ::first-line::before::after
二冬骚、用法與討論
1. 偽元素用單冒號(hào)還是雙冒號(hào)椅贱？
CSS3中偽元素用雙冒號(hào)::，如 ::after只冻，以區(qū)分偽類的單冒號(hào) :庇麦，如 :hover；
但出于兼容性考慮喜德，目前規(guī)范建議都使用單冒號(hào)山橄。
2. 偽類選擇器加與不加空格的區(qū)別？
（這里討論的主要是結(jié)構(gòu)性偽類選擇器舍悯，且待考證航棱，歡迎討論）
- 偽類選擇器前不加空格：選擇的是元素本身；
- 偽類選擇器前加空格：選擇的是元素的子元素（且不一定是該種元素）贱呐；
實(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è)任意類型的元素馁蒂；可能選中多個(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偽類與偽元素完全指南
總結(jié)偽類與偽元素（以上兩篇譯自/參考自同一篇原文）
詳解 CSS 屬性 - 偽類和偽元素的區(qū)別
Jquery偽類選擇器加與不加空格的區(qū)別
