更新時間:2022-09-28 08:11:27 來源:動力節(jié)點 瀏覽1106次
偽元素選擇器是什么?動力節(jié)點小編來為大家進行詳細介紹。
::first-letter —— 匹配指定選擇器的首字母/首漢字
::first-line —— 匹配指定選擇器的首行。
::selection —— 匹配元素中被用戶選中或處于高亮狀態(tài)的部分。
::before —— 匹配被選元素的內(nèi)容前面插入內(nèi)容,可以與 content 配合使用
::after —— 匹配被選元素的內(nèi)容后面插入內(nèi)容,可以與 content 配合使用
before 和 after 的內(nèi)容是無法被選取的
偽類本質(zhì)上是為了彌補常規(guī) CSS 選擇器的不足,以便獲取到更多信息;
偽元素本質(zhì)上是創(chuàng)建了一個有內(nèi)容的虛擬容器;
CSS3 中偽類和偽元素的語法不同—— :是偽類 , ::是偽元素
可以同時使用多個偽類,而只能同時使用一個偽元素,且偽元素只能在末尾使用
根本區(qū)別在于:它們是否創(chuàng)造了新的元素, 這個新創(chuàng)造的元素就叫 "偽元素" 。
偽元素/偽對象:是虛擬的元素,是創(chuàng)建新元素。 這個新元素(偽元素) 是某個元素的子元素,這個子元素雖然在邏輯上存在,但卻并不實際存在于文檔樹中.
偽類:(無標簽,找不到, 只有符合觸發(fā)條件時才能看到 ), 邏輯上存在但在文檔樹中卻無須標識的“幽靈”分類。
偽元素要配合 content 屬性一起使用
偽元素不會出現(xiàn)在 DOM 中,所以不能通過 js 來操作,僅僅是在 CSS 渲染層加入
偽元素的特效通常要使用:hover 偽類樣式來激活
:before 和 ::before
相同點
都可以用來表示偽類對象,用來設置對象前的內(nèi)容
:befor 和::before 寫法是等效的
不同點
:befor 是 Css2 的寫法,::before 是 Css3 的寫法
:before 的兼容性要比::before 好 ,不過在 H5 開發(fā)中建議使用::before 比較好
由于::before 和::after 生成的偽元素 包含在元素格式框內(nèi)
因此不能應用在替換元素或單標簽元素上, 比如 img 或 br 元素。
那些用 src 的都屬于 導入,導入就是替換元素
用 href 的屬于 引用,如 a 標簽,非替換元素
以上就是關(guān)于“CSS中偽元素選擇器的詳細介紹”,大家如果對此比較感興趣,想了解更多相關(guān)知識,不妨來關(guān)注一下本站的CSS視頻教程,里面的課程內(nèi)容由淺到深,通俗易懂,很適合小白學習,希望對大家能夠有所幫助哦。