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

雖然許多開發(fā)人員都熟悉常用的偽元素，如 ::before 和 ::after，但還有一些其他元素經(jīng)常被忽視或未得到充分利用。 

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

現(xiàn)在，讓我們開始吧！

1. ::selection 偽元素

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

例子：

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

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

2.::first-letter偽元素

::first-letter 偽元素允許您設(shè)置塊級元素的第一個(gè)字母的樣式。當(dāng)您想將特殊格式應(yīng)用于段落或標(biāo)題的初始字符時(shí)，它會派上用場。 

例子：

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

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

3. ::first-line 偽元素

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

例子：

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

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

4. ::marker 偽元素

::marker 偽元素以列表項(xiàng)的標(biāo)記為目標(biāo)，例如無序列表中的項(xiàng)目符號點(diǎn)或有序列表中的數(shù)字。使用此偽元素，您可以自定義標(biāo)記的外觀。 

例子：

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

5. ::placeholder 偽元素

::placeholder 偽元素允許您在輸入字段和文本區(qū)域中設(shè)置占位符文本的樣式。通過將自定義樣式應(yīng)用到占位符，您可以增強(qiáng)用戶體驗(yàn)并使其與您的整體設(shè)計(jì)保持一致。 

例子：

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

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

6. ::cue 偽元素

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

例子：

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

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

7. ::grammar-error 和::spelling-error 偽元素

::grammar-error 和 ::spelling-error 偽元素允許您分別對標(biāo)記為語法或拼寫錯(cuò)誤的文本部分設(shè)置樣式。當(dāng)內(nèi)容中存在錯(cuò)誤時(shí)，這些偽元素可用于向用戶提供視覺提示。 

例子：

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


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

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

8. ::backdrop 偽元素

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

例子：

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

在上面的代碼中，當(dāng)一個(gè)視頻元素處于全屏模式時(shí)，它后面的背景將有一個(gè)灰色的背景色。

9. ::target-text 偽元素

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

例子：

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

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

結(jié)論

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