CSS選擇器大致可以分成5類：基本選擇器，層次選擇器，屬性選擇器，偽類，偽元素。基本，層次，屬性選擇器比較容易理解，畢竟它們選擇的物件都屬於DOM中看得見摸得著的元素。但偽類和偽元素相對比較抽象，稍微有一點點理解上的難度。本篇就是我對偽類和偽元素的理解。 先介紹一下偽類和偽元素有什麼區別？其實這是個純概念上的問題，就算不理解也不影響實際的使用。但作為一個CSSer，概念這種東西有時候就像地基，地基越牢固，將來大廈也越堅挺。 偽類就是給既存的元素模擬新新增一個類來實現某種效果。偽元素就是模擬新新增一個元素來實現某種效果。不明白？舉個例子就明白了。 用偽類:first-child將第一個p設成紅色：

p:first-child {color: red}

<div
 
>
  <p>第一個段落</p>    //我將變成紅色
  <p>第二個段落</p>
</div>
等價於手動給DOM元素新增類：

.first-child {color: red}

<div>
  <p class="first-child">第一個段落</p>
  <p>第二個段落</p>
</div>

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

p::first-letter {color: red}

<div>
  <p
 
>第一個段落</p>
  <p>第二個段落</p>
</div>

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

.first-letter {color: red}

<div>
  <p><span class="first-letter">第</span>一個段落</p>
  <p>第二個段落</p>
</div>

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

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

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

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

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

<div id="logo">
  …
</div>
<a href="#logo">jump to logo</a>

語言偽類選擇器：: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）