CSS3選擇器--結構性偽類選擇器
在學習結構性偽類選擇器之前，先了解2個概念：CSS中的偽類選擇器和偽元素：
1、偽類選擇器：CSS中已經定義好的選擇器,不能隨便取名
常用的偽類選擇器是使用在a元素上的幾種，如a:link|a:visited|a:hover|a:active
2、偽元素選擇器：並不是針對真正的元素使用的選擇器，而是針對CSS中已經定義好的偽元素使用的選擇器
CSS中有如下四種偽元素選擇器：
1）first-line:為某個元素的第一行文字使用樣式；
2）first-letter:為某個元素中的文字的首字母或第一個字使用樣式；
3）before:在某個元素之前插入一些內容；
4）after: 在某個元素之後插入一些內容；
使用方法：選擇器：偽元素{樣式}
在後續的文章中會詳細介紹偽類選擇器的具體使用方法，本文主要是要介紹nth-child、nth-last-child、nth-of-type、nth-last-of-type、first-child 、last-child 、first-of-type 、last-of-type、only-child以及only-of-type。結構性偽類選擇器的公共特徵是允許開發者根據文件結構來指定元素的樣式。接下來開始進入正題。
1、nth-child和nth-last-child
1）E:nth-child(n) 選擇器用來定位某個父元素的一個或多個特定的子元素。其中“n”是其引數，而且可以是整數值(1,2,3,4)，也可以是表示式(2n+1、-n+5)和關鍵詞(odd、even)，但引數n的起始值始終是1，而不是0。也就是說，引數n的值為0時，選擇器將選擇不到任何匹配的元素。比如：
p:nth-child(n){background:red} 表示E父元素中的第n個位元組點
p:nth-child(odd){background:red}/*匹配奇數行*/
p:nth-child(even){background:red}/*匹配偶數行*/
p:nth-child(2n){background:red}/*其中n是從0開始計算*/
經驗與技巧:當“E:nth-child(n)”選擇器中的n為一個表示式時，其中n是從0開始計算，當表示式的值為0或小於0的時候，不選擇任何匹配的元素。
例子（Html程式碼）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p,h1{
height:30px;
width:300px;
border:1px solid #00A2E9;
}
p:nth-child(2n){
background-color: #64b0ff;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
</body>
</html>
但是某些情況下會有問題，比如我將上面的例子改寫成下面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p,h1{
height:30px;
width:300px;
border:1px solid #00A2E9;
}
p:nth-child(2n){
background-color: #64b0ff;
}
</style>
</head>
<body>
<p>p1</p>
<h1>h1</h1>/*增加了h1標籤*/
<p>p2</p>
<h1>h2</h1>/*增加了h1標籤*/
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
</body>
</html>
這個問題 就需要用E:nth-of-type(n) 來解決，後面會詳細介紹。
2、E:nth-of-type(n) 和E:nth-last-of-type(n)
1）“E:nth-of-type(n)”選擇器和“E:nth-child(n)”選擇器非常類似，不同的是它只計算父元素中指定的某種型別的子元素。當某個元素中的子元素不單單是同一種類型的子元素時，使用“E:nth-of-type(n)”選擇器來定位於父元素中某種型別的子元素是非常方便和有用的。在“E:nth-of-type(n)”選擇器中的“n”和“E:nth-child(n)”選擇器中的“n”引數也一樣，可以是具體的整數，也可以是表示式，還可以是關鍵詞。
剛才的那個例子就可以直接利用這個選擇器實現，它可以只選中p元素。
p:nth-of-type(2n){
background-color: #64b0ff;
}效果圖如下，完美的實現了^^。
2）E:nth-last-of-type(n)d(n) 選擇器和前面的“E:nth-of-type(n)”選擇器非常的相似，只是這裡多了一個“last”，所起的作用和“E:nth-of-type(n)”選擇器有所區別，從某父元素的最後一個子元素開始計算，來選擇特定的元素。這裡的使用就不舉例說明了。
3、E:first-child和E:last-child
1）“E:first-child”選擇器表示的是選擇父元素的第一個子元素的元素E。簡單點理解就是選擇元素中的第一個子元素，記住是子元素，而不是後代元素。
案例程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p,h1{
height:30px;
width:300px;
border:1px solid #00A2E9;
}
p:first-child{
background-color: #64b0ff;
}
</style>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
<p>p6</p>
</body>
</html>效果圖：
2）“E:last-child”選擇器與“E:first-child”選擇器作用類似，不同的是“E:last-child”選擇器選擇的是元素的最後一個子元素。
其他幾種結構性偽類選擇器這裡就不做詳細介紹了。這裡主要是對比三種選擇器。
總結：
為了方便記憶和查詢，把CSS的結構偽類選擇器歸為四類：
1）通用子元素過濾器：E:nth-child(n)（順序過濾）和E:nth-last-child(n)(逆序過濾)
2）通用子型別元素過濾器：E:nth-of-type（順序過濾）和E:nth-last-of-type(n)(逆序過濾)
3）特定位置的子元素：E:first-child,E:last-child,E:first-of-type,E:last-of-type
4）特定狀態的元素：E:root（根節點）、E:only-child（獨子元素）、E:only-of-type（獨子型別元素）和E:empty（孤節點）