偽類更多的定義的是狀態,如:hover,或者說是乙個可以使用css進行修飾的特定的特殊元素,如:first-child
偽類用於當已有元素處於的某個狀態時,為其新增對應的樣式,這個狀態是根據使用者行為而動態變化的。
當使用者懸停在指定的元素時,我們可以通過 :hover 來描述這個元素的狀態。雖然它和普通的 css 類相似,可以為已有的元素新增樣式,但是它只有處於 dom 樹無法描述的狀態下才能為元素新增樣式,所以將其稱為偽類。
偽元素用於建立一些不在文件樹中的元素,並為其新增樣式。
我們可以通過 :before 來在乙個元素前增加一些文字,並為這些文字新增樣式。雖然使用者可以看到這些文字,但是這些文字實際上不在文件樹中。
這個區別我們需要乙個例子來理解
this如果我們想要第乙個em標籤字型顏色變紅怎麼做呢is a text
使用我們熟悉的偽類很簡單
em:first-child但是如果不存在偽類我們怎麼做呢
這是我們就需要為第乙個em標籤新增類
thisis a text
em.first-child還是這個例子
現在我想讓這個段落的第乙個字母變紅
怎麼做呢
這回我們需要使用偽元素
p::first-letter同樣假設偽元素不存在的情況
這時我們只能巢狀span標籤來實現
thisis 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 應用於滑鼠懸停到的元素 ...