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

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

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

偽類(lèi)就是給既存的元素模擬新添加一個(gè)類(lèi)來(lái)實(shí)現(xiàn)某種效果。偽元素就是模擬新添加一個(gè)元素來(lái)實(shí)現(xiàn)某種效果。不明白？舉個(gè)例子就明白了。

用偽類(lèi):first-child將第一個(gè)p設(shè)成紅色：

p:first-child {color: red}


  
第一個(gè)段落
    //我將變成紅色
  
第二個(gè)段落

等價(jià)于手動(dòng)給DOM元素添加類(lèi)：

.first-child {color: red}


  
第一個(gè)段落
  
第二個(gè)段落

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

p::first-letter {color: red}


  
第一個(gè)段落
  
第二個(gè)段落

如果不用偽元素，你需要多加一個(gè)元素（如span）這樣來(lái)實(shí)現(xiàn)：

.first-letter {color: red}


  
第一個(gè)段落
  
第二個(gè)段落

再回過(guò)頭感受一下：偽類(lèi)就是給既存的元素模擬新添加一個(gè)類(lèi)來(lái)實(shí)現(xiàn)某種效果。偽元素就是模擬新添加一個(gè)元素來(lái)實(shí)現(xiàn)某種效果。現(xiàn)在我們來(lái)看看具體有哪些偽類(lèi)和偽元素。

偽類(lèi)：
可細(xì)分6類(lèi)：動(dòng)態(tài)，UI元素狀態(tài)，目標(biāo)，語(yǔ)言，結(jié)構(gòu)，否定

動(dòng)態(tài)偽類(lèi)選擇器：:link，:visited，:hover，:active，:focus。非常常用，從名字就能開(kāi)出用途（事實(shí)上所有偽類(lèi)選擇器從名字上都能看出用途），具體就不贅述了。太基礎(chǔ)的東西還是自行參考W3C吧

UI元素狀態(tài)偽類(lèi)選擇器：:checked，:enabled，:disabled。常用且簡(jiǎn)單，不贅述。

目標(biāo)偽類(lèi)選擇器：:target用來(lái)獲取錨點(diǎn)#部分。頁(yè)面實(shí)現(xiàn)跳轉(zhuǎn)定位很多都是使用a標(biāo)簽的錨點(diǎn)來(lái)來(lái)定位。其實(shí)背后的原理是a標(biāo)簽的href屬性能改變?yōu)g覽器的location.hash，讓頁(yè)面在有滾動(dòng)條的前提下實(shí)現(xiàn)頁(yè)面內(nèi)跳轉(zhuǎn)。:target的作用就是獲取跳轉(zhuǎn)的目標(biāo)元素，如下可以獲取到id為logo的div：

  …

jump to logo

語(yǔ)言偽類(lèi)選擇器：:lang根據(jù)lang屬性匹配元素，如

//可在html標(biāo)簽上設(shè)，也可以標(biāo)簽里設(shè)
:lang(en) { …… } //根據(jù)頁(yè)面的不同的語(yǔ)言（如英語(yǔ)和法語(yǔ)）對(duì)不同DOM元素進(jìn)行處理
:lang(fr) { …… }
結(jié)構(gòu)偽類(lèi)選擇器：: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看名字就知道了，第一個(gè)孩子。等同于:nth-child(1)。

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

:nth-child(n)該標(biāo)簽是某類(lèi)型，并且是父標(biāo)簽里第n個(gè)孩子。反之:nth-last-child(n)就是倒數(shù)第n個(gè)孩子。

:nth-of-type(n)父標(biāo)簽里第n個(gè)某類(lèi)型的孩子。反之:nth-last-of-type(n)父標(biāo)簽里倒數(shù)第n個(gè)某類(lèi)型的孩子。

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

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

現(xiàn)在把DOM結(jié)構(gòu)變一下：div下依次有一個(gè)a，兩個(gè)p。我們想將第二個(gè)p成紅色，用p:nth-child(2) { color: red; }就不對(duì)了，會(huì)將第一個(gè)p（因?yàn)樵摌?biāo)簽是p且是父元素的第二個(gè)孩子）設(shè)成紅色。用p:nth-of-type(2) { color: red; }才能將第二個(gè)p設(shè)成紅色。

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

:only-child父標(biāo)簽里僅有一個(gè)孩子。

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

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

:empty表示當(dāng)元素里面什么都沒(méi)有的時(shí)候（包括空格、標(biāo)簽內(nèi)換行）應(yīng)用相關(guān)樣式，常用于高亮提示用戶搜索的結(jié)果為空。例如.xx:empty { background-color: red; }，div里無(wú)內(nèi)容時(shí)背景色成紅色。div里有內(nèi)容時(shí)無(wú)背景色。但要注意偽元素不算內(nèi)容，如.xx::after { content: "hello"; }，此時(shí)div里顯示字但背景色仍舊是紅色。想想也知道::before，::after是偽元素，不是真實(shí)元素，因此不會(huì)影響:empty判斷。而且因?yàn)閭卧夭辉贒OM樹(shù)內(nèi)，你無(wú)法取得::before, ::after偽元素生成的content。

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

偽類(lèi)結(jié)合起來(lái)用能發(fā)揮更強(qiáng)大的作用。例如常見(jiàn)的漸進(jìn)式需求，當(dāng)列表項(xiàng)少于5項(xiàng)時(shí)用顯示預(yù)覽行文字，當(dāng)列表項(xiàng)多于5項(xiàng)時(shí)用不顯示預(yù)覽行文字。這樣條目少時(shí)，增加預(yù)覽行文字便于用戶預(yù)覽，且讓頁(yè)面不顯得非?？?。條目多時(shí)，不顯示預(yù)覽行，讓用戶更多地關(guān)注條目名，便于用戶選取。你如何處理呢？

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

其實(shí)CSS是有技巧能實(shí)現(xiàn)“回頭看”的。當(dāng)列表項(xiàng)數(shù)量為5時(shí)是臨界點(diǎn)。因此當(dāng)數(shù)量正好為5時(shí)，取第1項(xiàng)，再選中第1項(xiàng)之后的所有項(xiàng)即可：

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

如果沒(méi)明白，再解釋一下上面的代碼。第一行表示第一個(gè)元素是從后往前數(shù)的第5個(gè)元素。第二行是當(dāng)數(shù)量逐漸增加到5時(shí)，選中從第一個(gè)元素之后的所有元素。

偽元素
用于定位文檔中包含的文本，但無(wú)法在DOM樹(shù)中定位。有::first-line，::first-letter，::before，::after，::selection（CSS3之前是一個(gè)冒號(hào)，CSS3后變成兩個(gè)冒號(hào)，用于和偽類(lèi)區(qū)分開(kāi)）

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

::before，::after相當(dāng)于在元素內(nèi)部插入兩個(gè)額外的標(biāo)簽，最適合也是最推薦的應(yīng)用就是圖形生成

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

更多資源上：去轉(zhuǎn)盤(pán)；或者加入我的QQ群一起討論學(xué)習(xí)js，css等技術(shù)（QQ群：512245829）