css 偽類和偽類元素的區別

2022-06-23 21:21:10 字數 1006 閱讀 4023

偽類更多的定義的是狀態,如:hover,或者說是一個可以使用css進行修飾的特定的特殊元素,如:first-child

偽類用於當已有元素處於的某個狀態時,為其新增對應的樣式,這個狀態是根據使用者行為而動態變化的。

當使用者懸停在指定的元素時,我們可以通過 :hover 來描述這個元素的狀態。雖然它和普通的 css 類相似,可以為已有的元素新增樣式,但是它只有處於 dom 樹無法描述的狀態下才能為元素新增樣式,所以將其稱為偽類。

偽元素用於建立一些不在文件樹中的元素,併為其新增樣式。

我們可以通過 :before 來在一個元素前增加一些文字,併為這些文字新增樣式。雖然使用者可以看到這些文字,但是這些文字實際上不在文件樹中。

這個區別我們需要一個例子來理解

this

is a text

如果我們想要第一個em標籤字型顏色變紅怎麼做呢

使用我們熟悉的偽類很簡單

em:first-child
但是如果不存在偽類我們怎麼做呢

這是我們就需要為第一個em標籤新增類

this

is a text

em.first-child
還是這個例子

現在我想讓這個段落的第一個字母變紅

怎麼做呢

這回我們需要使用偽元素

p::first-letter
同樣假設偽元素不存在的情況

這時我們只能巢狀span標籤來實現

this

is a text

p span
看到這裡,相信大家已經清楚了為什麼一個叫做偽類,一個叫做偽元素

CSS的偽元素和偽類

css3為了區分偽類和偽元素,偽元素採用雙冒號寫法。 常見偽類 hover active visited focus。 常見偽元素 firs...

CSS中的行內元素和塊級元素

我們在構造頁面時,會發現有的元素是上下排列的,而有的則是橫向排列的,這是為啥子呢 看看上圖,我們也沒給他設定啥子屬性咋就不一樣了,其實是因為...

CSS和CSS3中的偽元素和偽類(總結)

好多人偽類和偽元素分清楚,其實就是一句話, 偽類的效果可以通過新增一個實際的類來達到,而偽元素的效果則需要通過新增一個實際的元素才能達到 。...