App下載

偽類(lèi)和偽元素是什么?如何區(qū)分?

猿友 2021-05-27 17:15:22 瀏覽數(shù) (8084)
反饋

很多同學(xué)在學(xué)習(xí) CSS 樣式表時(shí),分不清偽類(lèi)和偽元素。那么今天這篇文章 w3cschool 小編就來(lái)為大家介紹一下偽類(lèi)和偽元素是什么??jī)烧哂惺裁磪^(qū)別。

偽類(lèi)和偽元素概述

偽類(lèi)

偽類(lèi)是用來(lái)定義元素特殊狀態(tài)的,他可以用來(lái)設(shè)置鼠標(biāo)懸停樣式、元素獲取焦點(diǎn)樣式、設(shè)置鏈接樣式等。如常見(jiàn)的 hover、active、link 等都是偽類(lèi)。

偽元素

偽元素也稱(chēng)為偽對(duì)象,它不存在于 DOM 文檔中、是一個(gè)虛擬的元素。它可以用來(lái)代表某個(gè)元素的子元素,但是這個(gè)子元素并不存在于文檔樹(shù)中。

如何區(qū)分偽類(lèi)和偽元素

偽類(lèi)和偽元素的根本區(qū)別在于:是否創(chuàng)造了新的元素。

在 W3C 中,對(duì)偽類(lèi)和偽元素的描述是這樣的:偽類(lèi)用于向某些選擇器添加特殊的效果,而偽元素用于將特殊效果添加到某些選擇器中,也就是說(shuō)偽元素是對(duì)那些不能通過(guò) class 或 id 等選擇元素的補(bǔ)充。

我們來(lái)看下具體例子,當(dāng)我們想設(shè)置以下代碼中第一個(gè) p 標(biāo)簽內(nèi)的文本文字為紅色。

<div>
    <p>紅色</p>
    <p>黑色</p>
</div>

使用偽類(lèi)的話(huà),使用簡(jiǎn)單的代碼就可以試下:

p:first-child{
    color:red;
}

而如果想要通過(guò)偽元素去設(shè)置的話(huà),我們需要先為第一個(gè) p 標(biāo)簽添加一個(gè) class,再通過(guò)該 class 進(jìn)行設(shè)置。如下:

<div>
    <p class="first-child">紅色</p>
    <p>黑色</p>
</div>
p:first-child{
    color:red;
}

如上我們可以看出,如果可以直接使用偽類(lèi)的話(huà),方法較為簡(jiǎn)單。如果是使用偽元素的話(huà)則較為麻煩。在文章《偽類(lèi)是什么?常用的偽類(lèi)選擇器有哪些?》中,為大家介紹了常用的偽類(lèi)選擇器有哪些,這里便不再重復(fù)敘述。

以上就是文章“偽類(lèi)和偽元素是什么?如何區(qū)分?”的全部?jī)?nèi)容。更多 CSS 學(xué)習(xí)請(qǐng)前往 w3cschool

推薦課程:CSS 入門(mén)課程、CSS 教程

CSS

0 人點(diǎn)贊

App下載
App下載

掃描二維碼

下載編程獅App

關(guān)注有禮
微信公眾號(hào)

掃碼關(guān)注 領(lǐng)資料包

意見(jiàn)反饋
幫助中心
返回頂部