來(lái)源 | https://javascript.plainenglish.io/9-css-pseudo-elements-you-didnt-know-about-bb0faa395986

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

    

     

      

      

      

      

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

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

    

     

      

      

      

      

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

與 類(lèi)似::first-letter，::first-line偽元素以文本或塊級(jí)元素的第一行為目標(biāo)。您可以使用此偽元素將特定樣式應(yīng)用于段落或標(biāo)題的起始行。這是一個(gè)例子：

    

     

      

      

      

      

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

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

    

     

      

      

      

      

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

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

    

     

      

      

      

      

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

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

    

     

      

      

      

      

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

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

    

     

      

      

      

      

      

      

      

      

      

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

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

    

     

      

      

      

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

如果瀏覽器支持文本片段，則CSS::target-text偽元素表示已滾動(dòng)到的文本。它允許作者選擇如何突出顯示該部分文本。這是一個(gè)例子：

    

     

      

      

      

      

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

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

學(xué)習(xí)更多技能

請(qǐng)點(diǎn)擊下方公眾號(hào)