關於 CSS 偽類和元素及其用例的所有內容

在CSS中，Pseduo類別和元素是新增至選擇器的關鍵字，可讓您根據其狀態或元素的特定部分來設定樣式和元素。

例如：您將滑鼠懸停在錨點元素上，或者添加不同的樣式來查看連結是否被訪問，或者您可以用於定位文章中單字的第一個字母。使用這些關鍵字可以實現更多目標。

它們在主要瀏覽器中得到廣泛支持，並且自早期版本以來一直是 CSS 的一部分。

什麼是偽類？

偽類別就像是建立一個基於特定條件或狀態應用於元素的規則。

當元素的狀態因使用者與其互動的方式而改變時，將使用偽類。例如：

• 當有人將滑鼠停留在按鈕上 (:hover)
• 選擇表單欄位輸入時 (:focus)
• 當元素是列表中的第一個或最後一個子元素時

讓我們透過一個例子來理解：

a:hover {
  color: blue; 
}

a:visited {
  color: navyblue;
}

此範例顯示了錨元素的兩種不同狀態。當使用者將滑鼠懸停在錨元素上時，文字顏色會變為藍色，但如果使用者已經透過點擊該錨元素來訪問過，則顯示不同的預設顏色。

偽類可以用關鍵字名稱開頭的單一冒號 : 表示。以下是一些常見偽類的列表：

• 懸停 – 當使用者懸停時（將滑鼠放在元素上）
• :focus – 當使用者選擇一個欄位（如表單中的文字方塊）
• :nth-child(n) – 當您想要設定清單或網格中特定項目的樣式。
• :disabled – 當某個元素（如按鈕）被停用且無法按一下。

什麼是偽元素？

偽元素與偽類不同，因為它們針對元素的特定部分而不是整個元素。它允許您設定樣式或將內容插入到通常無法直接存取的元素的特定部分。

偽元素範例：

p::first-letter {      /* Accessing the first-letter of paragraph and adding style. */
  font-size: 2em; 
  font-weight: bold; 
  color: red;
}

此範例展示如何存取段落的第一個字母並使用 CSS 應用我們的樣式。

您可能已經注意到一件事，即使用雙 :: 冒號用於偽元素，而 : 冒號用於偽類。這是兩者語法的實際表示。

為什麼是偽類和偽元素？

這些工具讓我們可以在 CSS 中做一些非常酷的事情，而無需編寫一堆額外的 HTML 或 JavaScript。它們可以更好地控制您的設計，只需幾行 CSS 即可使您的網站更具互動性和動態性。

以下是如何區分它們的方法，並幫助您選擇正確的工具：

• 偽類有助於創建交互，例如懸停效果、聚焦輸入字段或基於列表位置的樣式。
• 偽元素允許對元素的特定部分進行樣式設定或在元素之前或之後添加裝飾內容，例如圖示、符號。

瀏覽器支援

所有主要瀏覽器都支援偽元素和偽類，但隨著網路的發展，新增的新關鍵字不提供預設支援。因此，我們需要使用瀏覽器前綴來解決這些問題。

例如，舊版瀏覽器不支援像 :not() 這樣的新偽類，因此它的行為有所不同。您應該始終使用線上工具 Caniuse.com

結論

在 CSS 中，偽類和偽元素是您設計網站的秘密武器，無需添加大量額外程式碼即可感覺生動且美觀。它們可協助您根據互動或狀態（偽類）設定元素的樣式，或針對元素的特定部分（偽元素）。

本部落格最初發佈於Programmingly.dev 網站。點擊此連結閱讀全文

以上是關於 CSS 偽類和元素及其用例的所有內容的詳細內容。更多資訊請關注PHP中文網其他相關文章！