僞類和僞元素

一：僞類：
1:定義：css僞類用於向某些選擇器添加特殊效果。
僞類其實與普通的css類相相似，能夠爲已有的元素添加樣式，可是他只有處於dom沒法描述的狀態下才能爲文檔樹中的元素添加樣式，因此將其稱爲僞類。(這種文檔樹沒法描述的狀態是什麼呢？當一個元素在用戶的不一樣行爲下就變化成不一樣的狀態這個行爲的變化dom就沒法描述，就要產生僞類，來爲一些選擇器添加特殊的效果)。
2:什麼是文檔樹（DOM）？：
DOM其實是以面向對象的方式描述的文檔模型，DOM定義了表示修改文檔所需的對象，這些對象的行爲和屬性，以及這些對象之間的關係，因此能夠吧DOM人文是頁面上數據和結構的一個樹形表示。
3:僞類選擇器有哪些:
1）:link向未被訪問的連接添加樣式（連接，看來是隻用於<a>）
2）:visited向已被訪問過的連接添加樣式（連接，看來仍是隻用於<a>）
3）:hover當鼠標懸浮在元素上方時，向元素添加樣式（沒有特地指定必須是連接，因此這個標籤被大量用於定義任何一個塊/行元素在鼠標通過時的樣式）
4）:active向被激活的元素添加樣式（當鼠標點擊時的樣式，要注意是點擊時的樣式的變化，這個也不是隻有超連接才能用的僞類選擇器）
5）:focus向擁有鍵盤輸入焦點的元素添加樣式（如input輸入框鼠標點擊時產生背景顏色的變化，注意是鍵盤輸入焦點。注意有些瀏覽器不支持此功能樣式）
6）:first-child
用於匹配父元素中的第一個元素。例如E:first-child,找的是E元素，E元素必須是他的父元素的第一位元素（擴展【：nth-child(n)】用於匹配父元素的第n個子元素E，這個父元素必須是元素E的父元素。）。
7）:lang向帶有指定lang屬性的元素添加樣式（在標籤中設置lang的屬性，在樣式表中對這種確切lang屬性值的元素進行樣式的設定，即便你有能力爲不一樣的語言定義特殊的規則）
4:注意：
僞類選擇器    」：link」和「：visited「」只能用於定於連接的未被訪問的樣式和已被訪問過的樣式。
僞類選擇器 「：hover「和」:active」能夠用於定義任何一個塊或行元素在鼠標通過時點擊時的樣式。
5:重點：上述四個僞類選擇器的順序必須是固定的，不然將不會產生指望中的變化。有一個好記的竅門：love hate（愛恨）。
二：僞元素：

1:僞元素用於建立一些不在文檔樹中的元素，而且爲他添加樣式，舉個例子：使用僞元素」：：before」能夠在一個元素前邊增長一些文本，而且能夠爲這些文本添加一些樣式，雖然用戶能夠看到這寫文本，可是這些文本是不存在於文檔樹中的。
2:幾種常見的僞元素：
1）:frist-letter用於向文本中的第一個字母添加樣式
2）:first-line向文本的首行添加樣式
3）:before在元素以前添加內容
4）:after在元素以後添加內容
3:僞元素和僞類的區別：
（1）僞類和僞元素的最大區別就在於有沒有建立一個文檔樹之外的元素。僞元素建立了一個文檔樹之外的元素（虛擬容器）併爲他添加樣式，這個容器不包含任何DOM元素可是能夠包含內容。換句話說僞類和僞元素的區別就是僞類的操做對象是文檔樹中已有的元素，而僞元素則建立了一個文檔樹之外的元素。
（2）僞類使用的是單冒號，可是在css3中規定僞元素使用的雙冒號，可是除了少部分的僞元素必須使用雙冒號之外，像after還有before都是支持單引號的。爲了兼容性因此目前仍是在使用一些常見的僞元素的時候採用單冒號較爲穩妥。