欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

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

在講鏈接時介紹的鏈接的四個狀態，就是偽類。

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

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

偽類

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

這里要引入一個概念 DOM，也就是 HTML 文檔結構樹，具體理解不我們寫的 HTML 標簽組成的文檔。

舉例來說，鏈接標簽的狀態，它并不真實存在在 DOM 樹里。所以它的狀態被定義成了偽類。

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

偽元素

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

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

同時偽元素還可以創建不存在的內容，如::before、::after。

偽類和偽元素的區別

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

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

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

偽類和偽元素示例

偽類 :first-child

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

<ul>   <li>第一個項</li>   <li>第二個項</li> </ul> 

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

如果這時候我們把 html 代碼換個順序

<ul>   <li>第二個項</li>   <li>第一個項</li> </ul> 

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

偽元素 ::first-letter

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

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

定義一個.first-letter 的類

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

然后在使用的時候，把第一個字使用 span 元素單獨放置，并在 span 元素上應用了這個剛才定義的樣式。

看到效果如上。

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

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

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

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

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

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

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

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

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

總結

• ?? 偽元素是文檔無法創建出來的元素。

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

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