摘要：選擇器大致可以分成類基本選擇器，層次選擇器，屬性選擇器，偽類，偽元素。但偽類和偽元素相對比較抽象，稍微有一點點理解上的難度。本篇就是我對偽類和偽元素的理解。

CSS選擇器大致可以分成5類：基本選擇器，層次選擇器，屬性選擇器，偽類，偽元素。基本，層次，屬性選擇器比較容易理解，畢竟它們選擇的對象都屬于DOM中看得見摸得著的元素。但偽類和偽元素相對比較抽象，稍微有一點點理解上的難度。本篇就是我對偽類和偽元素的理解。

先介紹一下偽類和偽元素有什么區別？其實這是個純概念上的問題，就算不理解也不影響實際的使用。但作為一個CSSer，概念這種東西有時候就像地基，地基越牢固，將來大廈也越堅挺。

偽類就是給既存的元素模擬新添加一個類來實現某種效果。偽元素就是模擬新添加一個元素來實現某種效果。不明白？舉個例子就明白了。

用偽類:first-child將第一個p設成紅色：

p:first-child {color: red}


  
第一個段落
    //我將變成紅色
  
第二個段落

等價于手動給DOM元素添加類：

.first-child {color: red}


  
第一個段落
  
第二個段落

那偽元素呢？用偽元素::first-letter給第一個字設成紅色：

p::first-letter {color: red}


  
第一個段落
  
第二個段落

如果不用偽元素，你需要多加一個元素（如span）這樣來實現：

.first-letter {color: red}


  
第一個段落
  
第二個段落

再回過頭感受一下：偽類就是給既存的元素模擬新添加一個類來實現某種效果。偽元素就是模擬新添加一個元素來實現某種效果。現在我們來看看具體有哪些偽類和偽元素。

偽類：
可細分6類：動態，UI元素狀態，目標，語言，結構，否定

動態偽類選擇器：:link，:visited，:hover，:active，:focus。非常常用，從名字就能開出用途（事實上所有偽類選擇器從名字上都能看出用途），具體就不贅述了。太基礎的東西還是自行參考W3C吧

UI元素狀態偽類選擇器：:checked，:enabled，:disabled。常用且簡單，不贅述。

目標偽類選擇器：:target用來獲取錨點#部分。頁面實現跳轉定位很多都是使用a標簽的錨點來來定位。其實背后的原理是a標簽的href屬性能改變瀏覽器的location.hash，讓頁面在有滾動條的前提下實現頁面內跳轉。:target的作用就是獲取跳轉的目標元素，如下可以獲取到id為logo的div：

  …

jump to logo

語言偽類選擇器：:lang根據lang屬性匹配元素，如

//可在html標簽上設，也可以標簽里設
:lang(en) { …… } //根據頁面的不同的語言（如英語和法語）對不同DOM元素進行處理
:lang(fr) { …… }
結構偽類選擇器：:first-child，:last-child，:nth-child(n)，:nth-last-child(n)，:nth-of-type(n)，:nth-last-of-type(n)，:first-of-type，:last-of-type，:only-child，:only-of-type，:root，:empty。

:first-child看名字就知道了，第一個孩子。等同于:nth-child(1)。

:last-child看名字就知道了，最后一個孩子。等同于:nth-last-child(1)。

:nth-child(n)該標簽是某類型，并且是父標簽里第n個孩子。反之:nth-last-child(n)就是倒數第n個孩子。

:nth-of-type(n)父標簽里第n個某類型的孩子。反之:nth-last-of-type(n)父標簽里倒數第n個某類型的孩子。

:nth-child(n)和:nth-of-type(n)這兩個偽類的參數n從0開始，你可以寫出任意喜歡（奇葩）的公式，如n+4，-n+6，3n-2等，當結果值等于或小于0時直接被無視掉。當然最常用的還是奇數2n+1和偶數2n，因此有兩個關鍵詞odd和even。那它倆的差異在哪里呢？

例如div下有兩個p，我們想將第二個p變成紅色，用p:nth-child(2) { color: red; }和p:nth-of-type(2) { color: red; }都可以。但意義是不同的，前者表示該標簽是p且是父標簽里第二個孩子。后者表示父標簽里第二個p。

現在把DOM結構變一下：div下依次有一個a，兩個p。我們想將第二個p成紅色，用p:nth-child(2) { color: red; }就不對了，會將第一個p（因為該標簽是p且是父元素的第二個孩子）設成紅色。用p:nth-of-type(2) { color: red; }才能將第二個p設成紅色。

:first-of-type，:last-of-type同理可知就是父標簽里第一個/最后一個某類型的孩子。等同于:nth-of-type(1)，:nth-last-of-type(1)。

:only-child父標簽里僅有一個孩子。

:only-of-type父標簽里唯一一個該類型的孩子。有什么用呢？例如當div里只有一張img時不浮動。當div里有多張img時，讓它們從左至右依次浮動顯示。你可以用div > img:only-of-type {…}來控制當div里只有一張圖片和不止一張圖片時采用不同的布局

:root匹配根元素，HTML中根元素始終是html，等同于基本選擇器html

:empty表示當元素里面什么都沒有的時候（包括空格、標簽內換行）應用相關樣式，常用于高亮提示用戶搜索的結果為空。例如.xx:empty { background-color: red; }，div里無內容時背景色成紅色。div里有內容時無背景色。但要注意偽元素不算內容，如.xx::after { content: "hello"; }，此時div里顯示字但背景色仍舊是紅色。想想也知道::before，::after是偽元素，不是真實元素，因此不會影響:empty判斷。而且因為偽元素不在DOM樹內，你無法取得::before, ::after偽元素生成的content。

否定偽類選擇器：:not，例如不hover時顯示某效果li:not(:hover)。

偽類結合起來用能發揮更強大的作用。例如常見的漸進式需求，當列表項少于5項時用顯示預覽行文字，當列表項多于5項時用不顯示預覽行文字。這樣條目少時，增加預覽行文字便于用戶預覽，且讓頁面不顯得非常空。條目多時，不顯示預覽行，讓用戶更多地關注條目名，便于用戶選取。你如何處理呢？

先無腦對li應用上顯示預覽行的式樣。然后用li:nth-child(5)，可惜它只能選中第5項，而我們想要的是當數量>=5時，所有li都應用隱藏預覽行文字的式樣。就算改成li:nth-child(5) ~ li也不對，它將第5個及之后的li應用上了新式樣，前4個仍舊是舊的式樣，等同于li:nth-child(n+5)。由于沒有“回頭看”的方式，你可能放棄CSS而用JS來處理。

其實CSS是有技巧能實現“回頭看”的。當列表項數量為5時是臨界點。因此當數量正好為5時，取第1項，再選中第1項之后的所有項即可：

li:first-child:nth-last-child(5),
li:first-child:nth-last-child(5) ~ li { 
    ... 
}

如果沒明白，再解釋一下上面的代碼。第一行表示第一個元素是從后往前數的第5個元素。第二行是當數量逐漸增加到5時，選中從第一個元素之后的所有元素。

偽元素
用于定位文檔中包含的文本，但無法在DOM樹中定位。有::first-line，::first-letter，::before，::after，::selection（CSS3之前是一個冒號，CSS3后變成兩個冒號，用于和偽類區分開）

::first-line，::first-letter分別是首行和首字母

::before，::after相當于在元素內部插入兩個額外的標簽，最適合也是最推薦的應用就是圖形生成

::selection用于匹配選中的文本（注意Firefox下是::-moz-selection）。該偽元素只接受兩個屬性background和color

更多資源上：去轉盤；或者加入我的QQ群一起討論學習js，css等技術（QQ群：512245829）