CSS3選擇器（一）
選擇器是CSS3中的一個重要的內容，使用它可以大幅度的提高開發人員書寫或者修改樣式表的工作效率；
1.首先先來介紹一下css3中的屬性選擇器的概念（其中att代表屬性，val代表屬性值）
這裡先給出一組簡單的html樣式：
<body>
<div class="one">測試內容1</div>
<div class="sectionone">測試內容2</div>
<div class="twosection">測試內容3</div>
<div class [att = val]選擇器
這種樣式在CSS2中我們就用到了，所以就不多說了，屬性選擇器主要講的是以下增加的三種。（eg:div[class=”one”]{ 樣式 }）
[att* = val]選擇器(*代表的是所有中只要有包含就滿足)
[att* = val]這種選擇器代表的是隻要“att”屬性中包含“val”屬性值，即可執行指定的樣式；（eg：div[class*=”section”]{ background:”red”: }）這樣就能同時將第二個和第三個div(他們的class名字內都包含有section)賦予背景色為紅色的這個樣式；
[att^ = val]選擇器（^代表的是開頭只要有包含就滿足）
[att^ = val]這種選擇器代表的是隻要“att”屬性的開頭是“val”屬性值，即可執行指定的樣式；eg:div[class^=”one”]{ background:”blue”; }）這樣就能同時將第三個和第六個div（它們的class名字的開頭都是two）賦予背景色為藍色的這個樣式；
[att
[att
2.接下來讓我們來了解一下結構性偽類選擇器;
所謂的偽元素選擇器，是指並不是針對真正的元素使用的選擇器，而是針對CSS中已經定義好的為元素使用的選擇器，使用方法如下：
選擇器：偽元素{屬性：值}
first-line:用於為某個元素中的第一行文字使用樣式；（eg: p:first-line{ color:purple; }）這樣p標籤裡的第一行文字就會變成紫色。
first-letter:用於為某個元素中第一個首字母或第一個字應用樣式；（eg: p:first-letter{ font-weight:700;}）這樣p段落中的第一個字就會加粗；
before:before偽元素是用於在選中的元素之前插入內容，使用樣式為：
<元素>：before {
content:插入的內容，可以是圖片/文字；
可以在這兒給插入的內容新增樣式，也可不寫；
}
after:after偽元素是用於在選中的元素之後插入內容，使用樣式為：
<元素>：after{
content:插入的內容，可以是圖片/文字；
可以在這兒給插入的內容新增樣式，也可-不寫；
}
3.接下來再來講四個選擇器（root,not,empty,target）
root選擇器指的就是根元素，在我們的頁面中也就是html元素 (例 body { background:yellow;}:root { background:red;})
not選擇器：當你相對某個結構元素使用樣式，但是想排除其中的某個元素讓它不使用這種樣式的時候，就可以用到這個not選擇器了。（例 body:not(p){ background:yellow; })這裡指的是除了p標籤意外的body裡面的元素的背景色為黃色；
empty選擇器：使用empty選擇器來制定當元素內容為空白時使用的樣式；（例 :empty{ background:#ff4200;}）這樣內容為空的標籤的背景色就被設定為橙色了。
target選擇器使用target選擇器來對頁面中某個target元素（該元素的ID被當作頁面中的超連結來使用）指定樣式，該樣式只在使用者點選了頁面中的超連結，並且跳轉到target元素後起作用。（例 :target { background:#ff4200; }）即當點選連結跳轉到對應的div的時候，對應的div的背景色將應用這個樣式。
4.接下來再來介紹下另外四個選擇器（first-child,last-child,nth-child,nth-last-child )
first-child:指定第一個子元素；
last-child:指定最後一個子元素；
nth-child(n):可以根據自己需要指定第幾個子元素（eg li:nth-child(3){ 樣式 }）代表的是指定的是第三個子元素。
nth-last-child(n):代表的是倒數第n個；
講到這兒，那就有一個不得不說的了，那就是對所有第奇數個元素或第偶數個子元素使用樣式；使用方法如下：
nth-child(odd){ 樣式 }//所有正數下來的第奇數個元素
nth-child(even) { 樣式 } //所有正數下來的第偶數個元素
注意：講到這兒奇數個和偶數個，那麼就有一個問題需要注意了，假設現有html程式碼如下所示；
<div>
<h2></h2>
<p></p>
<h2></h2>
<p></p>
<h2></h2>
<p></p>
<h2></h2>
<p></p>
</div>這種情況下，如果使用h2:nth-child(odd){ background:yellow; }你會發現效果和我們所預期的不一樣，所有的h2標籤的背景都變成了黃色。這是為什麼呢？
原來nth-child選擇器咋計運算元元素是奇數個還是偶數個元素的時候，是連同父元素中的所有子元素一起計算的，也就是說我們寫的h2：nth-chihld(odd)這句話的含義並不是指“針對div元素中第奇數個h2子元素來使用”，而是指“當div元素中的第奇數個子元素如果是h2元素的時候使用”。
為了避免上方注意所述問題，在此便引出了nth-of-type和nth-last-of-type選擇器。這時候再來寫nth-of-type(odd){ background:yellow; }就可以實現我們想要的效果了。