偽元素選擇器是什么？動(dòng)力節(jié)點(diǎn)小編來(lái)為大家進(jìn)行詳細(xì)介紹。

偽元素選擇器

::first-letter —— 匹配指定選擇器的首字母/首漢字

::first-line —— 匹配指定選擇器的首行。

::selection —— 匹配元素中被用戶(hù)選中或處于高亮狀態(tài)的部分。

::before —— 匹配被選元素的內(nèi)容前面插入內(nèi)容，可以與 content 配合使用

::after —— 匹配被選元素的內(nèi)容后面插入內(nèi)容，可以與 content 配合使用

before 和 after 的內(nèi)容是無(wú)法被選取的

偽類(lèi)和偽元素的區(qū)別

偽類(lèi)本質(zhì)上是為了彌補(bǔ)常規(guī) CSS 選擇器的不足，以便獲取到更多信息;

偽元素本質(zhì)上是創(chuàng)建了一個(gè)有內(nèi)容的虛擬容器;

CSS3 中偽類(lèi)和偽元素的語(yǔ)法不同—— :是偽類(lèi) ， ::是偽元素

可以同時(shí)使用多個(gè)偽類(lèi)，而只能同時(shí)使用一個(gè)偽元素，且偽元素只能在末尾使用

根本區(qū)別在于：它們是否創(chuàng)造了新的元素, 這個(gè)新創(chuàng)造的元素就叫 "偽元素" 。

偽元素/偽對(duì)象：是虛擬的元素，是創(chuàng)建新元素。 這個(gè)新元素(偽元素) 是某個(gè)元素的子元素，這個(gè)子元素雖然在邏輯上存在，但卻并不實(shí)際存在于文檔樹(shù)中.

偽類(lèi)：(無(wú)標(biāo)簽,找不到, 只有符合觸發(fā)條件時(shí)才能看到 ), 邏輯上存在但在文檔樹(shù)中卻無(wú)須標(biāo)識(shí)的“幽靈”分類(lèi)。

偽元素特點(diǎn)

偽元素要配合 content 屬性一起使用

偽元素不會(huì)出現(xiàn)在 DOM 中，所以不能通過(guò) js 來(lái)操作，僅僅是在 CSS 渲染層加入

偽元素的特效通常要使用:hover 偽類(lèi)樣式來(lái)激活

:before 和 ::before

相同點(diǎn)

都可以用來(lái)表示偽類(lèi)對(duì)象，用來(lái)設(shè)置對(duì)象前的內(nèi)容

:befor 和::before 寫(xiě)法是等效的

不同點(diǎn)

:befor 是 Css2 的寫(xiě)法，::before 是 Css3 的寫(xiě)法

:before 的兼容性要比::before 好 ，不過(guò)在 H5 開(kāi)發(fā)中建議使用::before 比較好

由于::before 和::after 生成的偽元素 包含在元素格式框內(nèi)

因此不能應(yīng)用在替換元素或單標(biāo)簽元素上， 比如 img 或 br 元素。

那些用 src 的都屬于 導(dǎo)入，導(dǎo)入就是替換元素

用 href 的屬于 引用，如 a 標(biāo)簽，非替換元素

以上就是關(guān)于“CSS中偽元素選擇器的詳細(xì)介紹”，大家如果對(duì)此比較感興趣，想了解更多相關(guān)知識(shí)，不妨來(lái)關(guān)注一下本站的CSS視頻教程，里面的課程內(nèi)容由淺到深，通俗易懂，很適合小白學(xué)習(xí)，希望對(duì)大家能夠有所幫助哦。