類與僞類，僞元素 2015-7-19

今天在看JS DOM編程的時候，看到關於網頁的三位一體，其中說到因爲僞類的存在，使得css能夠根據用戶觸發的事件改變元素的呈現效果。 這本屬於行爲層的範圍。

由於之前只會用，理解的不清晰，因此就查詢了下到底什麼是僞類。

轉自藍色理想：http://www.blueidea.com/tech/site/2006/4221.asp

 

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

在CSS2.1中的選擇符語法見下圖，由語法造成了各類選擇符。

類：在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  （在蘇沈小雨編的CSS2.0中文手冊中把:first-line，:first-letter列爲僞類應該是理解上的錯誤）

僞類和僞元素都不出如今源文件和文檔樹中。
     
總結上面能夠知道：

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

Refer：http://www.w3.org/TR/CSS21/selector.html