一篇文章帶你了解CSS Pseudo-elements(偽元素)
回復(fù)“前端”即可獲贈(zèng)前端相關(guān)學(xué)習(xí)資料
CSS Pseudo-elements 偽元素是一個(gè)附加至選擇器末的關(guān)鍵詞，允許對(duì)被選擇元素的特定部分修改樣式。CSS偽元素是一種樣式化文檔元素的方法，這些元素沒有由文檔樹中的位置明確定義。
一、什么是偽元素?
CSS偽元素允許設(shè)置元素或元素部分的樣式，而無需向其添加任何ID或類。當(dāng)只想為段落的第一個(gè)字母設(shè)置樣式以創(chuàng)建首字下沉效果，或者只想通過樣式表在元素之前或之后插入一些內(nèi)容等情況下，這將非常有用。
CSS3 為偽元素引入了新的雙冒號(hào)（::）語法，以區(qū)分偽元素和偽類。
偽元素的新語法可以通過以下方式給出：
/*選擇器::偽元素{ 屬性：值 ; }*/二、::first-line 第一行偽元素
該::first-line偽元素應(yīng)用特殊的樣式添加到文本的第一行。
例：（規(guī)則設(shè)置了段落中第一行文本的格式。第一行的長(zhǎng)度取決于瀏覽器窗口或包含元素的大?。?。
<html><head><meta charset="utf-8"><title>CSS ::first-line第一行偽元素示例title><style>p::first-line {color: #ff0000;font-variant: small-caps;}style>head><body style="background-color: aqua;"><p>本段的第一行與其余各行的樣式不同。本段的第一行與其余各行的樣式不同。本段的第一行與其余各行的樣式不同。本段的第一行與其余各行的樣式不同。本段的第一行與其余各行的樣式不同。p>body>html>
注意：
可以應(yīng)用于::first-line偽元素的CSS屬性是：font字體屬性, background背景屬性, color, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height。
三、:: first-letter偽元素
::first-letter偽元素用于將特殊的樣式添加到文本的第一行的第一個(gè)字母。
例：（規(guī)則設(shè)置文本段落的首字母格式，并創(chuàng)建類似首字下沉的效果）。
p::first-letter {color: #ff0000;font-size: xx-large;}
注意：
可以應(yīng)用于::first-letter偽元素的CSS屬性是：font 字體屬性, text-decoration, text-transform, letter-spacing, word-spacing, line-height, float, vertical-align ，color, margin 和 padding 屬性, border 邊框?qū)傩? background 背景屬性。
如果沒有屬性float或 float屬性值為'none‘。
四、:: before和:: after偽元素
::before和::after偽元素可以用于之前或一個(gè)元素的內(nèi)容之后插入生成的內(nèi)容。
content CSS屬性與這些偽元素結(jié)合使用時(shí)，插入所生成的內(nèi)容。
這對(duì)于進(jìn)一步修飾內(nèi)容豐富的元素非常有用，這些元素不應(yīng)屬于頁面的實(shí)際標(biāo)記?？梢允褂眠@些偽元素插入常規(guī)字符串或嵌入對(duì)象（例如圖像）和其他資源。
例：
<style>h1::before {content: url("img/border.png");}h1::after {content: url("img/border.png");}style>
五、偽元素和CSS類
通常，只需要使用這些偽元素設(shè)置文本的某個(gè)段落或其他塊級(jí)元素的樣式。在那里，向偽元素聲明一個(gè)類就起作用了。偽元素可以與CSS類組合以產(chǎn)生效果，特別是對(duì)于具有該類的元素。
例：（規(guī)則將顯示所有段落的第一個(gè)字母class="article"，以綠色，大小為xx-large。）
<html><head><meta charset="utf-8"><title>使用CSS偽元素與css類示例title><style>p.article::first-letter {color: #FF0000;font-size: xx-large;}style>head><body style="background-color: aqua;"><p class="article">This a sample article.p><p>This a normal paragraph.p>body>html>
六、總結(jié)
本文基于CSS基礎(chǔ)，主要介紹了什么是偽元素，::first-line， :: first-letter屬性在實(shí)際項(xiàng)目中的應(yīng)用，以及介紹了偽元素可以與CSS類組合以產(chǎn)生效果。實(shí)現(xiàn)頁面的效果。
歡迎大家積極嘗試，有時(shí)候看到別人實(shí)現(xiàn)起來很簡(jiǎn)單，但是到自己動(dòng)手實(shí)現(xiàn)的時(shí)候，總會(huì)有各種各樣的問題，切勿眼高手低，勤動(dòng)手，才可以理解的更加深刻。
代碼很簡(jiǎn)單，希望對(duì)你學(xué)習(xí)有幫助。
-------------------?End?-------------------
往期精彩文章推薦：
歡迎大家點(diǎn)贊，留言，轉(zhuǎn)發(fā)，轉(zhuǎn)載，感謝大家的相伴與支持
想加入前端學(xué)習(xí)群請(qǐng)?jiān)诤笈_(tái)回復(fù)【入群】
萬水千山總是情，點(diǎn)個(gè)【在看】行不行