前面在介紹選擇器時(shí)，提到了偽類和偽元素，并列舉了 CSS 里的偽類列表。

在講鏈接時(shí)介紹的鏈接的四個狀態(tài)，就是偽類。

偽，就是假的意思，也可以理解為不存在。

那偽類和偽元素，都有一個“偽”字，它們有什么區(qū)別呢？

偽類

偽類，就是假的類，不存在的類。那指的是在哪里不存在呢？

這里要引入一個概念 DOM，也就是 HTML 文檔結(jié)構(gòu)樹，具體理解不我們寫的 HTML 標(biāo)簽組成的文檔。

舉例來說，鏈接標(biāo)簽的狀態(tài)，它并不真實(shí)存在在 DOM 樹里。所以它的狀態(tài)被定義成了偽類。

另外，偽類是為了彌補(bǔ)選擇器的不足，例如，要獲取第一個子元素，無法使用常規(guī)的 CSS 選擇器獲取，但能通過:fist-child 獲取。

偽元素

偽元素，直接理解為不存在的元素，也就是文檔無法創(chuàng)建出來的元素。

比如說，文檔沒有辦法提供描述元素第一個字母或第一行字母的機(jī)制，但偽元素::first-letter、::first-line 可以做到。

同時(shí)偽元素還可以創(chuàng)建不存在的內(nèi)容，如::before、::after。

偽類和偽元素的區(qū)別

通過上述的描述，可以看出：

• 偽類彌補(bǔ)了 CSS 選擇器的不足，用來更方便地選擇元素。

• 偽元素是創(chuàng)建了一個虛擬容器(元素)，這樣可以在其中添加內(nèi)容或樣式。

偽類和偽元素示例

偽類 :first-child

ul li:first-child {   color: red; } 

<ul>   <li>第一個項(xiàng)</li>   <li>第二個項(xiàng)</li> </ul> 

通過:first-child，就可以直接選擇到 ul 元素下的第一個 li 元素。

如果這時(shí)候我們把 html 代碼換個順序

<ul>   <li>第二個項(xiàng)</li>   <li>第一個項(xiàng)</li> </ul> 

看到它就是按照文檔順序選擇了第一個 li。

偽元素 ::first-letter

如果我們想要把某段文字的第一個字母特別顯示，在不用::first-letter 的情況下，如何實(shí)現(xiàn)呢？

.first-letter {   font-size: 20px;   color: red;   font-weight: bold; } 

定義一個.first-letter 的類

<p>   <span class="first-letter">馬</span>上就要到國慶節(jié)假期啦，大家開心不開心！ </p> 

然后在使用的時(shí)候，把第一個字使用 span 元素單獨(dú)放置，并在 span 元素上應(yīng)用了這個剛才定義的樣式。

看到效果如上。

這樣做是不是有點(diǎn)麻煩，如果我有 100 個段落，我要手工為每一個段落的第一個字都加上 span 元素嗎？

這里就引入了偽元素::frist-letter。

p::first-letter {   font-size: 20px;   color: red;   font-weight: bold; } 

不再定義.first-letter 類，而是直接使用偽元素選擇第一個字。

<p>馬上就要到國慶節(jié)假期啦，大家開心不開心！</p> 

在 HTML 里也不再需要使用 span 元素。

這樣的效果和上面截圖是一樣的。

這樣是不是理解了，這里的::first-letter 實(shí)際上就是虛擬了前面我們實(shí)現(xiàn)的 span 元素。

結(jié)合前面的示例，可以參考選擇器里提到的偽類和偽元素，進(jìn)行更多更簡單的 CSS 代碼寫法吧。

總結(jié)

• ?? 偽元素是文檔無法創(chuàng)建出來的元素。

• ?? 偽類彌補(bǔ)了 CSS 選擇器的不足，用來更方便地選擇元素。

• ?? 偽元素是創(chuàng)建了一個虛擬容器(元素)，這樣可以在其中添加內(nèi)容或樣式。