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

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

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

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

偽類

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

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

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

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

偽元素

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

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

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

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

通過(guò)上述的描述，可以看出：

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

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

偽類和偽元素示例

偽類 :first-child

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

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

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

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

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

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

偽元素 ::first-letter

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

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

定義一個(gè).first-letter 的類

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

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

看到效果如上。

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

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

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

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

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

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

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

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

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

總結(jié)

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

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

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