定義
僞類
CSS 僞類 是添加到選擇器的關鍵字，指定要選擇的元素的特殊狀态。
例如，:hover 可被用于在使用者将滑鼠懸停在按鈕上時改變按鈕的顔色。
/* 所有使用者指針懸停的按鈕 */
button:hover {
color: blue;
} 複制
僞類存在的意義是為了通過選擇器，格式化DOM樹以外的資訊以及不能被正常CSS選擇器擷取到的資訊。
僞元素
僞元素是一個附加至選擇器末的關鍵詞，允許你對被選擇元素的特定部分修改樣式。
下例中的 ::first-line 僞元素可改變段落首行文字的樣式。
/* 每一個 <p> 元素的第一行。 */
p::first-line {
color: blue;
text-transform: uppercase;
} 複制
僞類連同僞元素一起，他們允許你不僅僅是根據文檔 DOM 樹中的内容對元素應用樣式，而且還允許你根據諸如像導航曆史這樣的外部因素來應用樣式（例如 :visited），同樣的，可以根據内容的狀态（例如在一些表單元素上的 :checked），或者滑鼠的位置（例如 :hover 讓你知道是否滑鼠在一個元素上懸浮）來應用樣式。
分類
僞類
僞元素
差別
下面是一個簡單的html清單片段：
<ul>
<li>我是第一個</li>
<li>我是第二個</li>
</ul> 複制
如果想要給第一項添加樣式，可以在為第一個
- 添加一個類，并在該類中定義對應樣式：
<ul>
<li class="first-item">我是第一個</li>
<li>我是第二個</li>
</ul>
li.first-item {
color: orange
} 複制
如果不用添加類的方法，我們可以通過給設定第一個
- 的:first-child僞類來為其添加樣式。這個時候，被修飾的
- 元素依然處于文檔樹中。
li:first-child {
color: orange
} 複制
下面是另一個簡單的html段落片段：
<p>Hello World, and wish you have a good day!</p> 複制
如果想要給該段落的第一個字母添加樣式，可以在第一個字母中包裹一個元素，并設定該span元素的樣式：
<p><span class="first">H</span>ello World, and wish you have a good day!</p>
.first {
font-size: 5em;
} 複制
如果不建立一個元素，我們可以通過設定<p>的:first-letter僞元素來為其添加樣式。這個時候，看起來好像是建立了一個虛拟的元素并添加了樣式，但實際上文檔樹中并不存在這個元素。
<p>Hello World, and wish you have a good day!</p>
p:first-letter {
font-size: 5em;
} 複制
從上述例子中可以看出，僞類的操作對象是文檔樹中已有的元素，而僞元素則建立了一個文檔數外的元素。是以，僞類與僞元素的差別在于：有沒有建立一個文檔樹之外的元素。
總結
1.僞類本質上是為了彌補正常CSS選擇器的不足，以便擷取到更多資訊；
2.僞元素本質上是建立了一個有内容的虛拟容器；
3.CSS3中僞類和僞元素的文法不同；
4.可以同時使用多個僞類，而隻能同時使用一個僞元素；