css僞類僞元素

在CSS中,模式(pattern)匹配規則決定那種樣式規則應用於文檔樹(document tree)的哪個元素。這些模式叫着選擇符(selector)。 一條CSS規則(rule)是選擇符{屬性:值;屬性:值;}(selector {property:value;property1:value2;}),即選擇符決定了{}中的聲明(declaration)匹配哪個元素。


類:在HTML中當表現class屬性的時候,人們可以用點(.)號來作爲~=號的一個替代選擇,所以div.value等同於div[class~=value]。此時.value只能嚴格的應用於HTML中的class屬性,所以此類選擇符叫類選擇符。

在CSS2.1中樣式通常依附與一個元素在文檔樹中的位置,這個簡單的模型對於許多情況來說是足夠的,但是一些常見的版式狀態不能應用於文檔樹的結構。例如,在HTML中,沒有元素能夠引用一個段落的第一行,所以也沒有簡單的CSS選擇符應用它。

所以,CSS引進了僞類(pseudo-class)和僞元素(pseudo-element)來允許基於文檔樹以外信息的格式化。

僞類:僞類對元素進行分類是基於特徵(characteristics)而不是它們的名字、屬性或者內容;原則上特徵是不可以從文檔樹上推斷得到的。在感覺上僞類可以是動態的,當用戶和文檔進行交互的時候一個元素可以獲取或者失去一個僞類。例外的是”:first-child”能通過文檔樹推斷出來,”:lang”在一些情況下也在從文檔樹中推斷出來。

僞類有::first-child ,:link:,vistited,:hover:,active:focus,:lang

僞元素:僞元素是創造關於文檔語言能夠指定的文檔樹之外的抽象。例如文檔語言不能提供訪問元素內容第一字或者第一行的機制。僞元素允許設計師引用它們,否則這是難以辦到的。僞元素還提供樣式設計師給在源文檔中不存在的內容分配樣式(例如::before和:after能夠訪問產生的內容)。

僞元素有::first-line,:first-letter,:before,:after

僞類和僞元素都不出現在源文件和文檔樹中。

總結上面可以知道:

類選擇器可以看着屬性選擇符E[class~=className]在HTML應用中的一種快捷方式,從邏輯和功能上理解有傳統類的含義,其被HTML元素預定義的屬性class引用,所以叫着類選擇器。 僞類可以獨立於文檔的元素來分配樣式,且可以分配給任何元素,邏輯上和功能上類類似,但是其是預定義的、不存在於文檔樹中且表達方式也不同,所以叫僞類。 僞元素所控制的內容和一個元素控制的內容一樣,但是僞元素不存在於文檔樹中,不是真正的元素,所以叫僞元素。

發佈了16 篇原創文章 · 獲贊 7 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章