僞類與僞元素的區別

標準的定義： 
CSS 引入僞類和僞元素的概念是爲了實現基於文檔樹以外的信息的格式化。 
僞類有：:first-child ，:link:，vistited，:hover，:active，:focus，:lang 僞元素有：:first-line，:first-letter，:before，:after  
 
僞類與僞元素的區別 
 先看一個僞元素 first-line 例子。如今有一段HTML，內容是一個段落： 
<p>I am the bone of my sword. Steel is my body, and fire is my blood.  I have created over a thoustand blades.  
Unknown to Death.Nor known to Life. Have withstood pain to create many weapon.  Yet, those hands will never hold anything. So as I pray, unlimited blade works. </p>  
 
若是我要描述這個段落的第一行，在不用僞元素的狀況下，我會怎麼作？想來我必定要嵌套一層 span，而後加上類名: 
<p><span class="first-line">I am the bone of my sword. Steel is my body, and fire is my blood. </span>  
I have created over a thoustand blades. 
Unknown to Death.Nor known to Life. Have withstood pain to create many weapon.  Yet, those hands will never hold anything. So as I pray, unlimited blade works. </p>  
 
再反觀一個僞類 first-child 的例子，有一個簡單的列表： <ul> <li></li> <li></li> </ul> 若是我要描述 ul 的第一個元素，我無須嵌套新的元素，我只須給第一個已經存在的 li 添加一個類名就能夠了： 
<ul> <li class="first-child"></li> <li></li> </ul>  
儘管，第一行和第一個元素，這二者的語意類似，但最後做用的效果卻徹底不一樣。因此，僞類和僞元素的根本區別在於：它們是否創造了新的元素(抽象)。從咱們模仿其意義的角度來看，若是須要添加新元素加以標識的，就是僞元素，反之，若是隻須要在既有元素上添加類別的，就是僞類。而這也是爲何，標準精確地使用 「create」 一詞來解釋僞元素，而使用 「classify」 一詞來解釋僞類的緣由。一個描述的是新建立出來的「幽靈」元素，另外一個則是描述已經存在的符合「幽靈」類別的元素。 
僞類一開始單單只是用來表示一些元素的動態狀態，典型的就是連接的各個狀態(LVHA)。隨後CSS2標準擴展了其概念範圍，使其成爲了全部邏輯上存在但在文檔樹中卻無須標識的「幽靈」分類。 
僞元素則表明了某個元素的子元素，這個子元素雖然在邏輯上存在，但卻並不實際存在於文檔樹中。 
 

wk_ad_begin({pid : 21});wk_ad_after(21, function(){$('.ad-hidden').hide();}, function(){$('.ad-hidden').show();});

僞類和僞元素混淆的由來 
最爲混淆的，多是大部分人都將 :before 和 :after 這樣的僞元素隨口叫作僞類，並且即便在概念混淆的狀況下，實際使用上也毫無問題——由於即便概念混淆，對真正使用也不會形成多少麻煩:) 
CSS Selector Level 3 爲了區分這二者的混淆，而特地用冒號加以區分： 
 僞類用一個冒號表示 :first-child 
 僞元素則使用兩個冒號表示 ::first-line 
而且規定，瀏覽器既要兼容CSS1和2裏既存的僞元素的單冒號表示，同時又要不兼容CSS3新引入的僞元素的單冒號表示。後來的結果你們都知道，由於低版本IE對雙冒號的兼容問題，幾乎全部的CSSer在寫樣式的時候都不約而同的使用了單冒號。這無形中，讓這種混淆延續了下來。而CSS3新僞元素的使用到目前爲止，還遠遠不成氣候。 
 
僞類和僞元素使用上須要注意的地方 
明白其不一樣以後，就須要注意和考慮在實際使用上的一些問題。好比：僞類和僞元素的選擇器特殊性(優先級)如何計算？ 
我在以前的 CSS選擇器距離無關 一文中，翻譯過CSS標準的計算選擇器的特殊性這一部分，看完那部分，答案就清楚了：除了否認僞類的特殊規定外，分開各自做爲真正的類和元素計算。 
雖然標準之後的版本可能會容許選擇器多僞元素的狀況，但就目前爲止，僞元素在一個選擇器裏只能出現一次，而且只能出如今末尾。實則，僞元素是選中了某個元素的符合邏輯的某個實際卻不存在的部分，因此應用中也不會有人將其誤寫成多個。僞類則是像真正的類同樣發揮着類的做用，沒有數量上的限制，只要不是相互排斥的僞類，也能夠同時使用在相同的元素上。關於CSS3選擇器的詳細解釋，推薦 rogerjohansson 的 CSS 3 selectors explained。