八、結構性偽類選擇器【:nth-child(n)】
:nth-child(n)選擇器用來匹配某個父元素的一個或多個特定的子元素，和jquery中一樣。
其中"n"是其參數，而且可以是整數值(1,2,3,4)，也可以是表達式（2n+1,-n+5）和關鍵字(odd【奇數】、even【偶數】)，但是參數n的值起始值始終是1，而不是0。也就是說，參數n的值為0時，選擇器將選擇不到任何匹配的元素。
Note:當“:nth-child(n)”選擇器中的n為一個表達式時，其中n是從0開始計算，當表達式的值為0或小於0的時候，不選擇任何匹配的元素。如下表所示：
所以要達到斑馬線的效果就非常容易了。
偶數行變橙色，ol >li:nth-child(2n|even){background:orange}；
奇數行變綠色，ol > li:nth-child(2n+1|2n-1|odd){background: green;}
九、 結構性偽類選擇器【:nth-last-child(n)】
：nth-last-child(n)和:nth-child(n)相似，但是多了個last，這個last代表從后向前，其他地方沒差別。
舉例：設置列表中倒數第五個列表項背景色為橙色。
<style type="text/css"> ol > li:nth-last-child(5){ background: orange; } </style> <ol> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> <li>item6</li> <li>item7</li> <li>item8</li> <li>item9</li> <li>item10</li> </ol>
十、【:first-of-type】選擇器
:first-of-type選擇器類似於:first-child選擇器，不同之處是指定了元素的類型，主要用於定位一個父元素下的某個類型的第一個子元素。
個人覺得這個:first-of-child是對:first-child的細分，錦上添花。
舉個例子：給div容器中第一個p元素設置樣式。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>選擇器</title> <style type="text/css"> /*p元素的父元素的第一個子元素是div而不是p元素，因此該樣式不起作用*/ p:first-child { color: red; } /*此時不用first-of-type,更待何時*/ p:first-of-type { color: blue; } </style> </head> <body> <div class="wrapper"> <div>第一個子元素是div元素</div> <div>第二個div元素</div> <p>第一個p元素</p> <p>第二個p元素</p> </div> </body> </html>
對於這個:first-of-type我真的覺得這名字很不貼切，沒個明顯的child來表示類型中第一個子元素，還不如叫:first-type-child更合適的，就像上面說的:nth-last-child(n)是對nth-child(n)的擴展一樣。
十一、【:last-of-type】選擇器
:last-of-type選擇器和:first-of-type功能是一樣的，不同的是它匹配的是父元素下的某個類型的最后一個子元素。
舉例：將容器“div.wrapper”中最后一個Div元素背景設置為橙色。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>選擇器</title> <style type="text/css"> .wrapper > div:last-of-type{ background: orange; } </style> </head> <body> <div class="wrapper"> <div>我是第一個Div元素</div> <div>我是第二個Div元素</div> <div>我是第三個Div元素</div> <p>我是第一個段落</p> <p>我是第二個段落</p> <p>我是第三個段落</p> </div> </body> </html>
十二、【:nth-of-type(n)】 選擇器
又 一個of-type，看到這里應該就明白了，這個:nth-of-type(n)是對:nth-child(n)選擇器的擴展，只計算父元素中指定的某種類型的子元素。當某個元素中的子元素不是同一種類型的子元素時，使用:nth-of-type(n)選擇器來匹配父元素中特定類型的子元素就很方便了。
舉例：設置偶數個段落背景色為橙色
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>屬性選擇器</title> <style type="text/css"> .wrapper>p:nth-of-type(even){ background-color:orange; } </style> </head> <body> <div class="wrapper"> <div>我是一個Div元素</div> <p>我是一個段落元素</p> <div>我是一個Div元素</div> <p>我是一個段落</p> <div>我是一個Div元素</div> <p>我是一個段落</p> <div>我是一個Div元素</div> <p>我是一個段落</p> <div>我是一個Div元素</div> <p>我是一個段落</p> <div>我是一個Div元素</div> <p>我是一個段落</p> <div>我是一個Div元素</div> <p>我是一個段落</p> <div>我是一個Div元素</div> <p>我是一個段落</p> </div> </body> </html>
十三、【:nth-last-of-type(n)】選擇器
:nth-last-of-type(n)和:nth-of-type(n)選擇器一樣是選擇父元素中指定的某種子元素類型，但它的起始方向是從最后一個子元素開始，使用方法同：nth-last-child(n)一樣。
舉例：將容器“div.wrapper”中的倒數第三個段落背景設置為橙色。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>選擇器</title> <style type="text/css"> .wrapper > p:nth-last-of-type(3){ background: orange; } </style> </head> <body> <div class="wrapper"> <p>我是第一個段落</p> <p>我是第二個段落</p> <p>我是第三個段落</p> <p>我是第四個段落</p> <p>我是第五個段落</p> <div>我是一個Div元素</div> <p>我是第六個段落</p> <p>我是第七個段落</p> </div> </body> </html>
十四、【:only-child】選擇器
:only-child，一看就是選擇一個元素，且該元素是其父元素唯一的子元素。
舉例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>選擇器</title> <style type="text/css"> .post p { background: green; color: #fff; padding: 10px; } .post p:only-child { background: orange; } </style> </head> <body> <div class="post"> <p>我是一個段落</p> <p>我是一個段落</p> </div> <div class="post"> <p>我是一個段落</p> </div> </body> </html>
十五、【:only-of-type】選擇器
:only-of-type選擇器是對:only-child的擴展，選擇某種類型的子元素，且該子元素是其父元素中唯一一個該類型 的選擇器。
舉例：修改容器中僅有一個div元素的背景色為橙色。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>選擇器</title> <style type="text/css"> .wrapper > div:only-of-type { background: orange; } </style> </head> <body> <div class="wrapper"> <p>我是一個段落</p> <p>我是一個段落</p> <p>我是一個段落</p> <div>我是一個Div元素</div> </div> </body> </html>
本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載注明出處：http://www.cnblogs.com/starof/p/4574196.html有問題歡迎與我討論，共同進步。