CSS偽類與偽元素

2022-01-10 14:29:02 字數 839 閱讀 9565

css引入偽類和偽元素概念是為了格式化文件樹以外的資訊。也就是說,偽類和偽元素是用來修飾不在文件樹中的部分,比如,一句話中的第乙個字母,或者是列表中的第乙個元素。

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

是基於元素當前狀態進行選擇的。在與使用者的互動過程中元素的狀態是動態變化的,因此該元素會根據其狀態呈現不同的樣式。當元素處於某狀態時會呈現該樣式,而進入另一狀態後,該樣式也會失去。

css3新增選擇器,利用dom樹進行元素過濾,通過文件結構的互相關係來匹配元素,能夠減少classid屬性的定義,使文件結構更簡潔。

用於建立一些不在文件樹中的元素,並為其新增樣式。實際上,偽元素就是選取某些元素前面或後面這種普通選擇器無法完成的工作。控制的內容和元素是相同的,但它本身是基於元素的抽象,並不存在於文件結構中。比如說,我們可以通過::before來在乙個元素前增加一些文字,並為這些文字新增樣式。

css3規範中要求使用單冒號:用於css3偽類,雙冒號::用於css3偽元素,目的是區分偽類和偽元素。

css 偽類 與 偽元素

偽類就是一種虛構的狀態或者說是一種具有特殊屬性的元素,可以使用 css 進行樣式修飾。偽類前面通常加乙個 之後跟上偽類的名字或括號裡面的值。常用的偽類 link visited hove active focus first child nth child 偽元素更像是虛擬的元素可以和 html 元...

css 偽類與偽元素

屬性 描述 link 向未被訪問的鏈結新增樣式。visited 向已被訪問的鏈結新增樣式。hover 當滑鼠懸浮在元素上方時,向元素新增樣式。active 向被啟用的元素新增樣式。focus 向擁有鍵盤輸入焦點的元素新增樣式。first child 向元素的第乙個子元素新增樣式 lang 向帶有指定...

CSS 偽類與偽元素

根據用途分類的偽類總結圖和根據冒號分類的偽元素總結圖 偽類與偽元素 css引入偽類和偽元素概念是為了格式化文件樹以外的資訊 偽類用於當已有元素處於的某個狀態時,為其新增對應的樣式,這個狀態是根據使用者行為而動態變化的。偽元素用於建立一些不在文件樹中的元素,並為其新增樣式。區別 偽類的操作物件是文件樹...