CSS偽類 偽元素

2021-10-19 11:17:14 字數 732 閱讀 9107

區別:它們是否創造了新元素。

偽元素:不存在於dom文件中,偽元素用於建立一些不在文件樹中的元素,並為其新增樣式。它是虛擬的元素,是創造新元素,代表某個元素的子元素,則個子元素邏輯上存在,但卻並不存在於文件樹中。

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

偽元素選擇符:

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

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

舉個例子:

如果我們想要讓第乙個p標籤為紅色

常見的偽類、偽元素

::before ::after的應用

css偽類,偽元素

偽類作用於整個元素,比如 a link a hover div first child 儘管這些條件都不是基於dom的,但結果沒乙個都是作用於乙個完整的元素,比如整個鏈結,段落,div等等 偽元素作用於元素一部分,比如 p first line p first letter 偽元素作用於元素的一部分...

CSS偽類 偽元素

css偽類用於向某些選擇器新增特殊的效果。錨偽類a link 未訪問的鏈結 a visited 已訪問的鏈結 a hover 滑鼠移動到鏈結上 a active 選定的鏈結 注意 1 在 css 定義中,a hover 必須被置於 a link 和 a visited 之後,才是有效的。2 在 cs...

CSS 偽元素 偽類

link 未訪問的鏈結 visited 已訪問的鏈結 hover 滑鼠移到元素上 active 向被啟用的鏈結新增樣式 focus 獲得輸入焦點的元素 first child 作為某元素的第乙個子元素的元素 lang 向帶有指定lang屬性的元素新增樣式 在 css 定義中,a hover 必須被置...