css 偽元素是一項強大的功能，它允許您為所選元素的特定部分設(shè)置樣式，而無需額外的 JAVAScript 代碼。
雖然許多開發(fā)人員都熟悉常用的偽元素，如 ::before 和 ::after，但還有一些其他元素經(jīng)常被忽視或未得到充分利用。
在本文中，我們將分享9 個鮮為人知的 CSS 偽元素，它們可以增強您的樣式設(shè)置能力。
現(xiàn)在，讓我們開始吧！
1. ::selection 偽元素
::selection 偽元素以用戶選擇的文本部分為目標(biāo)。它提供了一種將樣式應(yīng)用于所選文本并自定義其外觀的方法。
例子：
::selection {
background-color: yellow;
color: red;
}
在上面的代碼中，當(dāng)用戶在頁面上選擇文本時，它將以黃色背景和紅色文本顏色突出顯示。
2.::first-letter偽元素
::first-letter 偽元素允許您設(shè)置塊級元素的第一個字母的樣式。當(dāng)您想將特殊格式應(yīng)用于段落或標(biāo)題的初始字符時，它會派上用場。
例子：
p::first-letter {
font-size: 2em;
color: red;
}
在上面的代碼片段中，每個段落的第一個字母將以更大的字體顯示并顯示為紅色。
3. ::first-line 偽元素
類似于 ::first-letter，::first-line 偽元素以文本或塊級元素的第一行為目標(biāo)。您可以使用此偽元素將特定樣式應(yīng)用于段落或標(biāo)題的起始行。
例子：
p::first-line {
font-weight: bold;
text-decoration: underline;
}
在上面的代碼中，每個段落的第一行將以粗體顯示并帶有下劃線。
4. ::marker 偽元素
::marker 偽元素以列表項的標(biāo)記為目標(biāo)，例如無序列表中的項目符號點或有序列表中的數(shù)字。使用此偽元素，您可以自定義標(biāo)記的外觀。
例子：
li::marker {
color: blue;
font-weight: bold;
}
5. ::placeholder 偽元素
::placeholder 偽元素允許您在輸入字段和文本區(qū)域中設(shè)置占位符文本的樣式。通過將自定義樣式應(yīng)用到占位符，您可以增強用戶體驗并使其與您的整體設(shè)計保持一致。
例子：
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)記為語法或拼寫錯誤的文本部分設(shè)置樣式。當(dāng)內(nèi)容中存在錯誤時，這些偽元素可用于向用戶提供視覺提示。
例子：
p::grammar-error {
text-decoration: line-through;
color: red;
}
p::spelling-error {
text-decoration: underline;
color: blue;
}
在上面的代碼中，段落中的語法錯誤將以劃線文本修飾和紅色顯示，而拼寫錯誤將以下劃線和藍(lán)色顯示。
8. ::backdrop 偽元素
::backdrop 偽元素與全屏 API 結(jié)合使用，以在全屏模式下自定義元素背后的背景。它允許您將默認(rèn)的黑色背景更改為自定義顏色或樣式。
例子：
video::backdrop {
background-color: gray;
}
在上面的代碼中，當(dāng)一個視頻元素處于全屏模式時，它后面的背景將有一個灰色的背景色。
9. ::target-text 偽元素
::target-text CSS 偽元素代表滾動到的文本（如果瀏覽器支持文本片段）。它允許作者選擇如何突出顯示該部分文本。
例子：
::target-text {
background-color: rebeccapurple;
color: white;
}
這是 MDN 提供的在線示例。請注意，此 API 目前處于試驗階段。
結(jié)論
CSS 偽元素為元素的特定部分設(shè)置樣式和增強網(wǎng)頁的視覺吸引力提供了廣泛的可能性。您無需使用過多的 JavaScript 代碼即可實現(xiàn)令人印象深刻的樣式效果。
