child 顧名思義，就是小孩子的意思，換句話說，凡是套上 child 的 DOM，外頭的 DOM 就是他的爸爸 ( 父元素 )，不管裏頭的元素是甚麼，都是 child，而 child 又有以下幾種：
偽類的名稱與類別
基本類別
:first-child：第一個子元素
:last-child：最後一個子元素
:nth-child(數值)：第幾個子元素，選擇某個元素的一個或多個特定的子元素
:nth-child(2n)：挑出偶數的元素(2的倍數)
:nth-child(2n+1)：挑出奇數的元素
:nth-last-child(數值)：從後面數來第幾個子元素，選擇某個元素的一個或多個特定的子元素，從這個元素的最後一個子元素開始算
:only-child：只有一個子元素，選擇的元素是它的父元素的唯一一個了元素。
:nth 與其他選擇器
:nth-of-type() 選擇指定的元素；
:nth-last-of-type() 選擇指定的元素，從元素的最後一個開始計算；
:first-of-type 選擇一個上級元素下的第一個同類子元素；
:last-of-type 選擇一個上級元素的最後一個同類子元素；
:only-of-type 選擇一個元素是它的上級元素的唯一一個相同類型的子元素；
:empty 選擇的元素裡面沒有任何內容。
介紹使用
最熟悉的莫過於 :link, :focus, :hover 之類的了，因為這些在平時中是常用到的偽類選擇器，
那麼先和大家一起簡單總結一下 CSS 中常用的偽類選擇器的使用方法，最後把重心放到 CSS3 新增加的 :nth-child 選擇器的使用方法。
先創建一個Deom
See the Pen SS3 選擇器 | 偽類選擇器-1-基本 by Jimmy_Wu (@Jimmy_Wu) on CodePen.
CSS 的偽類語法和別的語法有點不一樣，其主要有兩種語法表達方式。
1 2 3 4 5 6 | // E:pseudo-class {property:value} /*其中E為元素;pseudo-class為偽類名稱;property是css的屬性;value為css的屬性值*/ a:link {color:red;} // E.class:pseudo-class{property:value} a.selected:hover {color: blue;} |
See the Pen SS3 選擇器 | 偽類選擇器-1-基本 by Jimmy_Wu (@Jimmy_Wu) on CodePen.
一、動態偽類
動態偽類，因為這些偽類並不存在於 HTML 中,而只有當用戶和網站交互的時候才能體現出來，動態偽類包含兩種，第一種是我們在鏈接中常看到的錨點偽類，如”:link”,”:visited”;另外一種被稱作用戶行為偽類，如「:hover」,”:active”和”:focus”。先來看最常見的錨點偽類
對於這四個錨點偽類的設置，有一點需要特別注意，那就是他們的先後順序，要讓他們遵守一個愛恨原則 LoVe/HAte, 也就是Link–visited–hover–active。如果你把順序搞錯了會給你帶來意想不到的錯誤，大家對於這個應該很熟悉的，如果是初學的朋友，可以私下練習一下。其中:hover和:active又同時被列入到用戶行為偽類中
:hover用於當用戶把鼠標移動到元素上面時的效果
:active用於用戶點擊元素那一下的效果（正發生在點的那一下，鬆開鼠標左鍵此動作也就完成了）
:focus用於元素成為焦點，這個經常用在表單元素上。
:hover在IE6下只有a元素支持
:active只有IE7-6不支持
:focus在IE6-7下不被支持
二、UI元素狀態偽類
把”:enabled”,”:disabled”,”:checked”偽類稱為UI元素狀態偽類，這些主要是針對於HTML中的Form元素操作，最常見的比如我們”type=”text”有enable和disabled兩種狀態，前者為可寫狀態後者為不可狀態；另外”type=”radio”和”type=”checkbox””有”checked”和”unchecked”兩種狀態。來看兩個實例，比如說你想將”disabled”的文本框與別的文本框區別出來，你就可以這樣應用
1 | input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;} |
頁面中禁用的文本框應用了一個不同的樣式。那麼對於其他幾個用法是一樣的，這裡就不在講述。IE6-8不支持”:checked”,”:enabled”,”:disabled”這三種選擇器。
三、CSS3的:nth選擇器
1、:first-child
:first-child是用來選擇某個元素的第一個子元素，比如我們這裡的這個demo，你想讓列表中的”1″具有與從不同的樣式，我們就可以使用:first-child來實現：
1 2 3 | .demo li:first-child {background: green; border: 1px dotted blue;} // 在沒有這個選擇器出現之前，我們都需在要第一個li上加上一個不同的class名，比如說「first」，然後在給他應用不同的樣式 .demo li.first {background: green; border: 1px dotted blue;} |
IE6不支持:first-child選擇器。
See the Pen SS3 選擇器 | 偽類選擇器-3-:first-child by Jimmy_Wu (@Jimmy_Wu) on CodePen.
2、:last-child
1 2 3 | .demo li:last-child {background: green; border: 2px dotted blue;} // 這個效果和以前在列表上的「last」的class是一樣的 .demo li.last {background: green; border: 2px dotted blue;} |
See the Pen SS3 選擇器 | 偽類選擇器-4-:last-child by Jimmy_Wu (@Jimmy_Wu) on CodePen.
3、:nth-child()
:nth-child()可以選擇某個的一個或多個特定的子元素，你可以按這種方式進行選擇：
1 2 3 4 5 6 7 | :nth-child(length);/*參數是具體數字*/ :nth-child(n);/*參數是n,n從0開始計算*/ :nth-child(n*length)/*n的倍數選擇，n從0開始算*/ :nth-child(n+length);/*選擇大於length後面的元素*/ :nth-child(-n+length)/*選擇小於length前面的元素*/ :nth-child(n*length+1);/*表示隔幾選一*/ //上面length為整數 |
:nth-child()可以定義他的值（值可以是整數，也可以是表達式），如上面所示，用來選擇特定的子元素，對於這個我們直接看實例，比我說的更好理解。
這種不式不能引用負值，也就是說li:nth-child(-3)是不正確的使用方法。
:nth-child(3),選擇某元素下的第三個子元素，（這裡的3可以是你自己需要的數字），比如說，我需要選擇列表中的第三個li元素，那麼我們可以直接這樣使用：
See the Pen SS3 選擇器 | 偽類選擇器-5-:nth-child() by Jimmy_Wu (@Jimmy_Wu) on CodePen.
:nth-child(n)，其中n是一個簡單的表達式，那麼”n”取值是從「0」開始計算的，到什麼時候結束我也不知道，如果你在實際應用中直接這樣使用的話，將會選中所有子元素，比如說，在我們的demo中，你在li中使用”:nth-child(n)”,那麼將選中所有的”li”,如：
1 2 3 | .demo li:nth-child(n) {background: lime;} // 等於 .demo li {background: lime;} |
See the Pen SS3 選擇器 | 偽類選擇器-6-:nth-child(n) by Jimmy_Wu (@Jimmy_Wu) on CodePen.
計算方式：
n=0 －－》 沒有選擇元素
n=1 －－》 選擇第一個li,
n=2 －－》 選擇第二個li,後在的依此類推，這樣下來就選中了所有的li
請注意了，這裡的「n」只能是”n”，不能使用其他字母代替，不然會沒有任何效果的。
:nth-child(2n)
這中方式是前一種的變身，我們可以選擇n的2倍數，當然其中「2」可以換成你自己需要的數字，如：
1 2 3 | .demo li:nth-child(2n) {background: lime;} //等於 .demo li:nth-child(even) {background: lime;} |
計算的過程：
n=0 －－》 2n=0 －－》 沒有選中任何元素，
n=1 －－》 2n=2 －－》 選擇了第二個li
n=2 －－》 2n＝4 －－》 選擇了第四個li，後面的依此類推
「:nth-child(2n)」也等於”:nth-child(even)”效果。
See the Pen SS3 選擇器 | 偽類選擇器-6-:nth-child(2n) by Jimmy_Wu (@Jimmy_Wu) on CodePen.
:nth-child(2n-1)
,這個選擇器是在”:nth-child(2n)”基礎上演變過來的，上面說了人是選擇偶數，那麼我們在他的基礎上減去「1」就變成奇數選擇，如：
1 | .demo li:nth-child(2n-1) {background: lime;} |
過程
n=0 －－》 2n-1=-1 －－》 也沒有選中任何元素，
n=1 －－》 2n-1=1 －－》 選擇第一個li
n=2 －－》 2n-1=3 －－》 選擇第三個li,後面的依此類推
其實實現這種奇數效果，我們還可以使用”:nth-child(2n+1)”和”:nth-child(odd)”,一起來看他們的效果
See the Pen SS3 選擇器 | 偽類選擇器-7-:nth-child(2n-1) by Jimmy_Wu (@Jimmy_Wu) on CodePen.
:nth-child(n+5)
這個選擇器是選擇從第五個元素開始選擇，這裡的數字你可以自己定義，如：
1 | .demo li:nth-child(n+5) {background: lime;} |
計算方法
n=0 －－》 n+5=5 －－》 選中第5個li
n=1 －－》 n+5=6 －－》 選擇第6個li，後面的就不列出來了，原理一樣
See the Pen SS3 選擇器 | 偽類選擇器-8-:nth-child(n+5) by Jimmy_Wu (@Jimmy_Wu) on CodePen.
:nth-child(-n+5)
這種選擇器剛好和上面的選擇器相反，這個是選擇第5個前面的，如：
1 | .demo li:nth-child(-n+5) {background: lime;} |
計算
n=0 －－》 -n+5=5 －－》 選擇了第5個li
n=1 －－》 -n+5=4 －－》 選擇了第4個li
n=2 －－》 -n+5=3 －－》 選擇了第3個li
n=3 －－》 -n+5=2 －－》 選擇了第2個li
n=4 －－》 -n+5=1 －－》 選擇了第1個li
n=5 －－》 -n+5=0 －－》 沒有選擇任何元素
See the Pen SS3 選擇器 | 偽類選擇器-9-:nth-child(-n+5) by Jimmy_Wu (@Jimmy_Wu) on CodePen.
:nth-child(4n+1)
這種方法是實現隔幾選一的效果，比如我們這裡是隔三選一，如果你把”4″換成別的數字那就是另外的一種隔法了，比如這個實例
IE6-8和FF3-瀏覽器不支持”:nth-child”選擇器。
1 | .demo li:nth-child(4n+1) {background: lime;} |
計算
n=0 －－》4n+1=1 －－》選擇了第一個li
n=1 －－》4n+1=5 －－》選擇了第五個li
n=2 －－》4n+1=9 －－》選擇了第九個li
See the Pen SS3 選擇器 | 偽類選擇器-10-:nth-child(4n+1) by Jimmy_Wu (@Jimmy_Wu) on CodePen.
4、:nth-last-child()
“:nth-last-child()”選擇器和前面的”:nth-child()”很相似，只是這裡多了一個last，所以他起的作用就和前面的”:nth-child”不一樣了，他只要是從最後一個元素開始算，來選擇特定元素。我們來看幾個實例：
1 | .demo li:nth-last-child(4) {background: lime;} |
其中”:nth-last-child(1)”和”:last-child”所起作用是一樣的，都表示的是選擇最後一個元素。
另外”:nth-last-child()”也可以像「:nth-child()」一樣，可以使用表達式來選擇特定元素，下面我們來看幾個特殊的表達式所起的作用
See the Pen SS3 選擇器 | 偽類選擇器-11-:nth-last-child(4) by Jimmy_Wu (@Jimmy_Wu) on CodePen.
:nth-last-child(2n)
這個表示的是從元素後面計算，選擇的是偶數個數，從而反過來說就是選擇元素的奇數，和前面的”:nth-child(2n+1)”,”:nth-child(2n-1)”,”:nth-child(odd)”所起的作用是一樣的。如：
1 2 3 4 5 6 | .demo li:nth-last-child(2n) {background: lime;} .demo li:nth-last-child(even) {background: lime;} 等於 .demo li:nth-child(2n+1) {background: lime;} .demo li:nth-child(2n-1) {background: lime;} .demo li:nth-child(odd) {background: lime;} |
See the Pen SS3 選擇器 | 偽類選擇器-12-:nth-last-child(2n) by Jimmy_Wu (@Jimmy_Wu) on CodePen.
:nth-last-child(2n-1)
這個選擇器剛好跟上面的相反，從後面計算選擇的是奇數，而從前面計算選擇的就是偶數位了，這個前面的”:nth-child(2n)”之類是相同的效果，如：
1 2 3 4 5 6 | .demo li:nth-last-child(2n+1) {background: lime;} .demo li:nth-last-child(2n-1) {background: lime;} .demo li:nth-last-child(odd) {background: lime;} 等於： .demo li:nth-child(2n) {background: lime;} .demo li:nth-child(even) {background: lime;} |
See the Pen SS3 選擇器 | 偽類選擇器-13-:nth-last-child(2n-1) by Jimmy_Wu (@Jimmy_Wu) on CodePen.
看了這幾個實例，大家都知道”:nth-last-child()”和”nth-child()”使用方法是一樣的，只不過他們的區別是「:nth-child()」是從元素的第一個開始計算，而「:nth-last-child()」是從元素的最後一個開始計算，他們的計算方法都是一樣的。同樣在IE6-8和FF3.0-瀏覽器不支持「:nth-last-child()」選擇器。