九個你不知道的 CSS 偽元素

作者：佚名 2023-05-22 15:37:31

CSS 偽元素是一項強大的功能，它允許您為所選元素的特定部分設置樣式，而無需額外的 JavaScript 代碼。

在本文中，我們將分享9 個鮮為人知的 CSS 偽元素，它們可以增強您的樣式設置能力。

現在，讓我們開始吧！

1. ::selection 偽元素

::selection 偽元素以用戶選擇的文本部分為目標。它提供了一種將樣式應用于所選文本并自定義其外觀的方法。

例子：

::selection {
  background-color: yellow;
  color: red;
}

在上面的代碼中，當用戶在頁面上選擇文本時，它將以黃色背景和紅色文本顏色突出顯示。

::first-letter 偽元素允許您設置塊級元素的第一個字母的樣式。當您想將特殊格式應用于段落或標題的初始字符時，它會派上用場。

例子：

p::first-letter {
  font-size: 2em;
  color: red;
}

在上面的代碼片段中，每個段落的第一個字母將以更大的字體顯示并顯示為紅色。

類似于 ::first-letter，::first-line 偽元素以文本或塊級元素的第一行為目標。您可以使用此偽元素將特定樣式應用于段落或標題的起始行。

例子：

p::first-line {
  font-weight: bold;
  text-decoration: underline;
}

在上面的代碼中，每個段落的第一行將以粗體顯示并帶有下劃線。

::marker 偽元素以列表項的標記為目標，例如無序列表中的項目符號點或有序列表中的數字。使用此偽元素，您可以自定義標記的外觀。

例子：

li::marker {
  color: blue;
  font-weight: bold;
}

::placeholder 偽元素允許您在輸入字段和文本區域中設置占位符文本的樣式。通過將自定義樣式應用到占位符，您可以增強用戶體驗并使其與您的整體設計保持一致。

例子：

input::placeholder {
  color: #999;
  font-style: italic;
}

在上面的代碼中，輸入字段中的占位符文本將以淺灰色和斜體字體樣式顯示。

::cue 偽元素以 <audio> 或 <video> 元素的提示文本為目標。提示文本通常用于多媒體內容中的字幕或副標題。使用此偽元素，您可以將樣式專門應用于提示文本。

例子：

video::cue {
  color: white;
  background-color: black;
}

在上面的代碼中，視頻元素中的提示文本將具有白色文本顏色和黑色背景。

::grammar-error 和 ::spelling-error 偽元素允許您分別對標記為語法或拼寫錯誤的文本部分設置樣式。當內容中存在錯誤時，這些偽元素可用于向用戶提供視覺提示。

例子：

p::grammar-error {
  text-decoration: line-through;
  color: red;
}


p::spelling-error {
  text-decoration: underline;
  color: blue;
}

在上面的代碼中，段落中的語法錯誤將以劃線文本修飾和紅色顯示，而拼寫錯誤將以下劃線和藍色顯示。

::backdrop 偽元素與全屏 API 結合使用，以在全屏模式下自定義元素背后的背景。它允許您將默認的黑色背景更改為自定義顏色或樣式。

例子：

video::backdrop {
  background-color: gray;
}

在上面的代碼中，當一個視頻元素處于全屏模式時，它后面的背景將有一個灰色的背景色。

::target-text CSS 偽元素代表滾動到的文本（如果瀏覽器支持文本片段）。它允許作者選擇如何突出顯示該部分文本。

例子：

::target-text {
  background-color: rebeccapurple;
  color: white;
}

這是 MDN 提供的在線示例。請注意，此 API 目前處于試驗階段。

CSS 偽元素為元素的特定部分設置樣式和增強網頁的視覺吸引力提供了廣泛的可能性。您無需使用過多的 JavaScript 代碼即可實現令人印象深刻的樣式效果。

責任編輯：華軒來源： web前端開發