CSS僞類僞元素詳解
CSS選擇器大體能夠分紅5類：基本選擇器，層次選擇器，屬性選擇器，僞類，僞元素。基本，層次，屬性選擇器比較容易理解，畢竟它們選擇的對象都屬於DOM中看得見摸得着的元素。但僞類和僞元素相對比較抽象，稍微有一點點理解上的難度。本篇就是我對僞類和僞元素的理解。css
先介紹一下僞類和僞元素有什麼區別？其實這是個純概念上的問題，就算不理解也不影響實際的使用。但做爲一個CSSer，概念這種東西有時候就像地基，地基越牢固，未來大廈也越堅挺。html
僞類就是給既存的元素模擬新添加一個類來實現某種效果。僞元素就是模擬新添加一個元素來實現某種效果。不明白？舉個例子就明白了。瀏覽器
用僞類: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>
再回過頭感覺一下：僞類就是給既存的元素模擬新添加一個類來實現某種效果。僞元素就是模擬新添加一個元素來實現某種效果。如今咱們來看看具體有哪些僞類和僞元素。spa
僞類：
可細分6類：動態，UI元素狀態，目標，語言，結構，否認code
動態僞類選擇器：:link，:visited，:hover，:active，:focus。很是經常使用，從名字就能開出用途（事實上全部僞類選擇器從名字上都能看出用途），具體就不贅述了。太基礎的東西仍是自行參考W3C吧htm
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"> //可在html標籤上設，也能夠<body lang="en">標籤裏設
: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）
- 1. css中僞類/僞元素詳解
- 2. CSS 僞類與僞元素
- 3. css僞類和僞元素
- 4. CSS僞類與僞元素
- 5. css僞類與僞元素
- 6. CSS僞類和僞元素
- 7. CSS 僞類 僞元素
- 8. css—僞類和僞元素
- 9. CSS——僞元素與僞類
- 10. 【CSS】僞類與僞元素
- 更多相關文章...
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • 免費ARP詳解 - TCP/IP教程
- • Flink 數據傳輸及反壓詳解
- • Kotlin學習（二）基本類型
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. css中僞類/僞元素詳解
- 2. CSS 僞類與僞元素
- 3. css僞類和僞元素
- 4. CSS僞類與僞元素
- 5. css僞類與僞元素
- 6. CSS僞類和僞元素
- 7. CSS 僞類 僞元素
- 8. css—僞類和僞元素
- 9. CSS——僞元素與僞類
- 10. 【CSS】僞類與僞元素