css 偽類和偽類元素的區別

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

偽類更多的定義的是狀態,如: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規定,偽類由乙個冒號開始,然後為偽類的名稱。例如 after 偽元素由兩個冒號開始,然後為偽元素的名稱。例如 after 偽類的概念 偽類本質上是為了彌補常規css選擇器的不足,以便獲取到更多的資訊。通常表示獲取不存在與dom樹中的資訊,或獲取不能被常規css選擇器獲取的資訊。...

css偽類和偽元素

css偽類用於向某些選擇器新增特殊的效果。link,visited,hover,focus,active,first child,lang css3新增的偽類 last child,only child,first of type,last of type,only of type,nth chil...

CSS偽類和偽元素

css引入偽類和偽元素概念是為了格式化文件樹以外的資訊。也就是說,偽類和偽元素是用來修飾不在文件樹中的部分,比如,一句話中的第乙個字母,或是列表中的第乙個元素,又或者是滑鼠懸停在某個超連結上時要設定的樣式。常見的狀態偽類主要包括 link 應用於未被訪問過的鏈結 hover 應用於滑鼠懸停到的元素 ...