一、僞類
分爲兩種，一種是UI僞類，另一種是結構化僞類
- UI僞類：當html元素處於某種狀態時，比如鼠標指針懸停其上，才應用設定的css規則
- 結構化僞類：處於特定結構中，比如列表的最後一項，的html元素，才應用設定的css規則
UI僞類：
1. 鏈接僞類：共有四種，分別對應了鏈接的四種訪問狀態
| 鏈接狀態 | 狀態說明 | 示例代碼 |
|---|---|---|
| link | 未被用戶操作的原始狀態 | a:link{color:black; } |
| visited | 用戶點擊過的鏈接 | a:visited{color:gray; } |
| hover | 用戶鼠標懸停其上但並未點擊 | a:hover{text-decoration:none; } |
| active | 用戶正在點擊，但是鼠標還未鬆開 | a:active{color:red; } |
需要注意的是，有些鏈接僞類並不是只能用於鏈接，比如，如果想要實現鼠標懸停在段落上時，段落背景變爲灰色，可以用p:hover{background-color:gray; }實現。
2. :focus僞類
input:focus {border:1px solid yellow;}
上述代碼會在光標在input字段中時，爲該字段添加一個藍色邊框。這樣可以讓用戶明確的知道輸入的字符會出現在哪裏。
3. :target僞類
當用戶點擊一個跳轉到當前頁面中其他元素的鏈接時，跳轉到的元素即爲目標元素，可以用：target構成的僞類選擇器選中它，進行css樣式的設定。
<a href="#more_info">More Information</a>
<h2 id="more_info">This is the information you are looking for.</h2>
#more_info:target {background:gray;} /*對鏈接的跳轉目標設置樣式*/
上述僞類選擇器的作用是：對文字鏈接"More Information"的跳轉目標，即id爲more_info的<h2>標籤，設置css樣式，使其背景色變爲灰色。
結構化僞類：
1. :first-child和:last-child
<ol class="results">
<li>FirstChild</li>
<li>Second</li>
<li>LastChild</li>
</ol>
對其應用僞類選擇器：
ol.results li:first-child {color:blue;}
ol.results li:last-child {color:red;}
則，文本FirstChild變爲藍色，LastChild變爲紅色
2. :hth-child
使用 指定類型:nth-child(數字){屬性名:屬性值; }選擇器來選取屬於其父元素的特定類型的第 n 個親子元素的所有元素，並應用聲明的樣式。
關於這個僞類，剛開始看w3school的文字解釋沒有看太明白，尤其是對其父元素這四個子的理解，但是結合着上面給出的示例代碼，多試幾次就清楚了。
<!DOCTYPE html>
<html>
<head>
<style>
p:nth-child(3){background:gray;}
li:nth-child(1){background:red; }
</style>
</head>
<body>
<p>測試1</p>
<article>
<p>第一個段落。</p>
<p>第二個段落。</p>
<p>第三個段落。</p>
<ul>
<h3>標題</h3>
<li>內容1</li>
<li>內容2</li>
</ul>
<p>第四個段落。</p>
</article>
<p>註釋：Internet Explorer 不支持 :nth-child() 選擇器</p>
</body>
</html>
畫出上述代碼簡單的DOM結構圖：
據此圖再去理解挺它的定義：
在父類body的親子元素中，第三個child元素剛好就是<p>標籤，由於僞類選擇器p:nth-child(3){background:gray;}的作用，其包裹的文本註釋：Internet Explorer 不支持 :nth-child() 選擇器，會應用上設定的樣式——填充灰色背景。
此外，父類article的親子元素中的第三個child元素剛好也是<p>標籤，所以其包裹的文本第三個段落。，也會應用上該樣式。
然而，父類ul的第三個親自元素不是<p>標籤，故p:nth-child(3){background:gray;}不起作用，並且，父類ul的第一個親子元素也不是<li>，故li:nth-child(1){background:red; }也沒有起作用。
所以，使用指定類型:nth-child(數字){屬性名:屬性值; }此僞類選擇器時，會對每一個父類的親子元素進行篩選，選擇數字符合以及類型符合的子元素，然後對其使用css樣式。
其最終顯示結果如下：
二、僞元素
僞元素，文檔中若有實無的元素
1. ::first-letter僞元素
可以對首字母的樣式進行調整，比如創建首字符放大效果
p::first-letter {font-size:300%;}
2. ::first-line僞元素
可以選中文本段落（一般情況下是段落）的第一行，並對其css樣式進行設置，例如：
p::first-line {font-variant:small-caps;}
可以把第一行以小型大寫字母顯示，但是，需要注意的是，僞元素::first-line 所指的第一行元素的長度不是固定的，會隨着瀏覽器窗口的寬度變化而變化。
3. ::befer和::after僞元素
用於在特定元素前面或者後面添加新的內容，比如
<p class="age">25</p>
對此標記添加如下樣式
p.age::before {content:"Age: ";}
p.age::after {content:" years.";}
最終顯示結果爲：
Age: 25 years.
Reference
- 《css設計指南(第三版)》
- W3School在線測試工具 V2 http://www.w3school.com.cn/tiy/t.asp?f=css_sel_nth-child
- jQuery :nth-child() 選擇器 | 菜鳥教程 http://www.runoob.com/jquery/sel-nthchild.html