在學習結構性偽類選擇器之前，先了解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
p:nth-child(n) 表示e父元素中的第n個字節點
p:nth-child(odd)/*匹配奇數行*/
p:nth-child(even)/*匹配偶數行*/
p:nth-child(2n)/*其中n是從0開始計算*/
經驗與技巧:當「e:nth-child(n)」選擇器中的n為乙個表示式時，其中n是從0開始計算，當表示式的值為0或小於0的時候，不選擇任何匹配的元素。
例子（html**）：
p1p2
p3p4
p5p6
但是某些情況下會有問題，比如我將上面的例子改寫成下面：
p1/*增加了h1標籤*/
p2/*增加了h1標籤*/
p3p4p5
p6
這個問題 就需要用e:nth-of-type(n) 來解決，後面會詳細介紹。
2）e:nth-last-child(n) 選擇器和前面的「e:nth-child(n)」選擇器非常的相似，只是這裡多了乙個「last」，所起的作用和「e:nth-child(n)」選擇器有所區別，從某父元素的最後乙個子元素開始計算，來選擇特定的元素。這裡的使用就不舉例說明了。
2、e:nth-of-type(n) 和e:nth-last-of-type(n)
剛才的那個例子就可以直接利用這個選擇器實現，它可以只選中p元素。
p:nth-of-type(2n)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。簡單點理解就是選擇元素中的第乙個子元素，記住是子元素，而不是後代元素。
案例**：
p1p2
p3p4
p5p6
2）「e:last-child」選擇器與「e:first-child」選擇器作用類似，不同的是「e:last-child」選擇器選擇的是元素的最後乙個子元素。
其他幾種結構性偽類選擇器這裡就不做詳細介紹了。這裡主要是對比三種選擇器。
總結：
為了方便記憶和查詢，把css的結構偽類選擇器歸為四類：
1）通用子元素過濾器：e:nth-child(n)（順序過濾）和e:nth-last-child(n)(逆序過濾)
2）通用子型別元素過濾器：e:nth-o
f-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（孤節點）
css3結構性偽類選擇器 target
target選擇器稱為目標選擇器，用來匹配文件 頁面 的url的某個標誌符的目標元素。我們先來上個例子，然後再做分析。html content for brand css menusection target 演示結果 分析 1 具體來說，觸發元素的url中的標誌符通常會包含乙個 號，後面帶有乙個標...
css3結構性偽類選擇器 last child
last child 選擇器與 first child 選擇器作用類似，不同的是 last child 選擇器選擇的是元素的最後乙個子元素。例如，需要改變的是列表中的最後乙個 li 的背景色，就可以使用這個選擇器，ul li last child 示例演示 在部落格的排版中，每個段落都有15px的m...
CSS3 結構性偽類選擇器 target
target選擇器稱為目標選擇器，用來匹配文件 頁面 的url的某個標誌符的目標元素。我們先來上個例子，然後再做分析。示例展示 點選鏈結顯示隱藏的段落。html id brand content for brand css menusection target 演示結果 分析 1 具體來說，觸發元素...