偽類和偽元素

接下來我們將要介紹的選擇器被稱為**偽類**和**偽元素**。它們有很多，而且通常用於非常特定的目的。一旦您知道如何使用它們，就可以檢視列表，看看是否有適合您嘗試完成的任務的內容。同樣，每個選擇器的相關 MDN 頁面有助於解釋瀏覽器支援。

先決條件 安裝基本軟體，瞭解 檔案處理 的基本知識，HTML 基礎知識（學習 HTML 簡介），以及 CSS 的工作原理（學習 CSS 入門）。
目標 瞭解偽類和偽元素選擇器。

什麼是偽類？

偽類是一種選擇器，用於選擇處於特定狀態的元素，例如，它們是其型別的第一個元素，或者滑鼠指標懸停在它們上面。它們往往表現得好像您已將一個類應用到文件的某個部分，通常有助於減少標記中的多餘類，並提供更靈活、更易於維護的程式碼。

偽類是以冒號開頭的關鍵字。例如，:hover 是一個偽類。

簡單的偽類示例

讓我們來看一個簡單的例子。如果我們想使文章中的第一個段落更大且加粗，我們可以向該段落新增一個類，然後向該類新增 CSS，如下面的第一個示例所示

但是，這可能難以維護——如果在文件頂部添加了一個新的段落怎麼辦？我們需要將類移動到新段落。與其新增類，不如使用 :first-child 偽類選擇器——這將始終定位文章中的第一個子元素，並且我們不再需要編輯 HTML（這可能並不總是可能的，可能是由於它是由 CMS 生成的）。

所有偽類的行為都與此類似。它們定位文件中處於某種狀態的某一部分，表現得好像您已在 HTML 中添加了一個類。在 MDN 上檢視一些其他示例

注意：在沒有元素選擇器位於其前面時編寫偽類和偽元素是有效的。在上面的示例中，您可以編寫 :first-child，並且規則將應用於任何作為 <article> 元素的第一個子元素的元素，而不僅僅是段落的第一個子元素——:first-child 等效於 *:first-child。但是，通常您希望獲得比這更多的控制，因此您需要更具體。

使用者操作偽類

某些偽類僅在使用者以某種方式與文件互動時才適用。這些**使用者操作**偽類，有時也稱為**動態偽類**，表現得好像在使用者與之互動時已向元素添加了一個類。示例包括

  • :hover — 如上所述；僅當用戶將指標移到元素上（通常是連結）時才適用。
  • :focus — 僅當用戶透過點選或使用鍵盤控制元件聚焦元素時才適用。

什麼是偽元素？

偽元素的行為類似。但是，它們表現得好像您已將一個全新的 HTML 元素新增到標記中，而不是將一個類應用到現有元素。

偽元素以雙冒號::開頭。::before就是一個偽元素的例子。

注意：一些早期的偽元素使用單冒號語法，因此您有時可能會在程式碼或示例中看到它。為了向後相容，現代瀏覽器支援使用單冒號或雙冒號語法的早期偽元素。

例如，如果您想選擇段落的首行，您可以將其包裹在一個<span>元素中並使用元素選擇器；但是，如果您包裹的單詞數量比父元素的寬度長或短，則此方法會失效。由於我們通常不知道一行上能容納多少個單詞——因為如果螢幕寬度或字型大小發生變化，這個數字也會隨之改變——因此無法透過新增 HTML 來可靠地實現這一點。

::first-line偽元素選擇器可以可靠地為您做到這一點——如果單詞數量增加或減少，它仍然只會選擇第一行。

它的作用就像一個<span>元素神奇地包裹在第一行格式化文本週圍，並在行長髮生變化時更新。

您可以看到，這會選擇兩個段落的第一行。

組合偽類和偽元素

如果您想使第一個段落的第一行變為粗體，可以將:first-child和::first-line選擇器連結在一起。嘗試編輯前面的即時示例，使其使用以下 CSS。我們的意思是，我們想要選擇第一個<p>元素的第一行，該元素位於<article>元素內。

css
article p:first-child::first-line {
  font-size: 120%;
  font-weight: bold;
}

使用 ::before 和 ::after 生成內容

有一些特殊的偽元素，它們與content屬性一起使用，用於使用 CSS 將內容插入到您的文件中。

您可以使用它們插入一段文字，例如下面的即時示例。嘗試更改content屬性的文字值，並檢視它在輸出中的變化。您還可以將::before偽元素更改為::after，並檢視文字插入到元素的末尾而不是開頭。

然而，從 CSS 中插入文字字串並不是我們在網路上經常做的事情，因為這些文字對於某些螢幕閱讀器來說是不可訪問的，並且將來可能難以被某些人找到和編輯。

這些偽元素更有效的用途是插入圖示，例如下面示例中新增的小箭頭，這是一個我們不希望螢幕閱讀器讀出的視覺指示器。

這些偽元素也經常用於插入空字串，然後可以像頁面上的任何元素一樣對其進行樣式設定。

在下一個示例中，我們使用::before偽元素添加了一個空字串。為了能夠使用寬度和高度對其進行樣式設定，我們將其設定為display: block。然後我們使用 CSS 對其進行樣式設定，就像任何元素一樣。您可以試著修改 CSS，並改變它的外觀和行為。

::before和::after偽元素以及content屬性的使用在 CSS 中被稱為“生成內容”，您會經常看到此技術被用於各種任務。一個很好的例子是網站CSS Arrow Please，它可以幫助您使用 CSS 生成箭頭。在建立箭頭時檢視 CSS，您會看到正在使用的::before和::after偽元素。每當您看到這些選擇器時，請檢視content屬性以瞭解正在新增到 HTML 元素中的內容。

總結

在本文中，我們介紹了 CSS 偽類和偽元素，它們是特殊型別的選擇器。

偽類使您能夠在元素處於特定狀態時將其作為目標，就像您為該狀態向 DOM 添加了一個類一樣。偽元素就像您向 DOM 添加了一個全新的元素，並使您能夠對其進行樣式設定。::before和::after偽元素使您能夠使用 CSS 將內容插入到文件中。

在下一篇文章中，我們將學習組合器。

另請參閱